Full screen jumbotron with content underneath - html

Question

I am using bootstrap frame work and using the jumbotron feature to create my header. I have a fixed navigation and want the jumbotron to be the full height and width of screen when scaled. I have content underneath the jumbotron that I want scrollable like regular. Just when someone gets to site its fullscreen jumbotron
html
<div class="jumbotron row">
<header>
<div class='navbar ........
... paragraph content ...
</div>
css
.jumbotron {
position: relative;
background: url('../img/pexels-photo.jpeg') no-repeat center center;
background-size: cover;
height:100%;
}

Answer 1

purii's answer is perfectly acceptable, however I'd opt for a slightly different approach when targeting the jumbotron BootStrap class:
HTML:
<div class="fullheight jumbotron row">
<header>
<div class='navbar ........
... paragraph content ...
</div>
CSS:
.fullheight.jumbotron {
position: relative;
background: url('../img/pexels-photo.jpeg') no-repeat center center;
background-size: cover;
min-height:100vh;
}
As you can see I placed a new fullheight class (can be any class name of course) within the "jumobtron" <div>. I then used that class name along with the jumbotron class as the selector for CSS styling.
The benefits of doing it this way is that it ensures that if you chose to use <div class="jumobtron"> on another page in the future, you can still use BootStrap's default styling for this class.

Answer 2

There are multiple ways to solve your problem. The most straight forward would be the usage of viewport units to scale your height. They are supported at least by IE >= 9.
.jumbotron {
position: relative;
background: url('../img/pexels-photo.jpeg') no-repeat center center;
background-size: cover;
min-height:100vh;
}