user3550879 user3550879 - 1 month ago 8
CSS Question

How can I make an element take up full screen height with scrolling?

I am using Bootstrap in my website and I want to make the element with class jumbotron take up the full user window. Then the user can scroll through the rest of the site.

Currently I have it working with:

CSS:

jumbotron { height: 100vh;}


HTML:

<div class="row">
<div class="jumbotron">
...
</div>
</div>

... rest of site ...


but I want to fool-proof my site to make it as reliable as possible and want to use a more widely accepted way.

Answer

You need to make container-flud before the jumbotron class For full screen height make a class and give style Like .fullS_height {height: 100vh;}

HTML:

<div class="container-flud">
  <div class="jumbotron fullS_height">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
  </div>
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>

CSS:

.fullS_height {
  height: 100vh;
  }

.fullS_height {
  height: 100vh;
  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-flud">
  <div class="jumbotron fullS_height">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
  </div>
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>