Using Bootstrap, how can I create multiple fullscreen div's to stack on one another

Question

I'd like to create a page with multiple 100% divs, stacked on top of one another. Similar to the Bootstrap Cover Template Example, but with additional div's underneath the first screen. I've tried looking around a lot but haven't been able to find a solution. I know it's out there, maybe I'm just searching for the wrong things.

• MrMike: You could do <div class="row">...</div> and then another <div class="row">...</div> underneath it
• Daniel: The question is vague, can you show us some example code you've tried already or explain in slightly more detail what you're trying to achieve.
• Tim: @MikeKoch What would I set the heights of the rows to? 100% isn't working.

Answer 1

Using div's with a 100% height won't solve your problem. Since you're already looking at the Bootstrap I assume that you're not afraid of using Javascript or Jquery. Therefor, you can use this little code to set the height of you div always 100% of your screen.

$("div_name").css("min-height", $(window).height() );

Using this little code, will set the height of your div that's wrapping your section. So, for every part of your website that needs the height of your window ( 100% ) you have to use a 'wrapper' div. So it would be something like this:

<div class="section">
 <h2>Section 1!</h2>
 <p>This is just an section with the same height as your browser.</p>
</div>
<div class="section">
 <h2>Section 2!</h2>
 <p>This is just an section with the same height as your browser.</p>
</div>

If you want an example, you can take a look at my portfolio: http://portfolio.stikkie.net/

• Tim: This makes sense. What am I doing wrong here though? jsfiddle.net/TTgvn Also, you're portfolio is exactly what I'm looking for, looks nice too!
• Tim: Nevermind I figured it out, apparently html doesn't like assigning 2 classes to one div. Thanks for the help.

Answer 2

The key is to remind the html and body that they can be 100% height. : fiddle

p.s. you don't need bootstrap

HTML

<section class="cover-thing first">
 first
</section>
<section class="cover-thing second">
 second
</section>
<section class="cover-thing third">
 third
</section>

CSS

*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html, body {
 height: 100%;
}
body {
 margin: 0;
}
.cover-thing {
 width: 100%;
 height: 100%;
 float: left; 
}
.first {
 background-color: #333;
 color: white;
}
.second {
 background-color: #eee;
}
.third {
 background-color: #f06;
}

Answer 3

I am using sections with the below css, it covers the entire screen. This should help.

CSS

.section{ height:100vh; }.

1vh = 1% of viewport height and 100vh = 100% of height. Here is the Fiddle

• jrc: For modern browsers, this should be the accepted answer.

Answer 4

To manage multiple - full screen - stacked divs, you have to use javascript in addition of css, because css can't make a 100% height on elements based on your screen size. for example, add :

$("body > div").style("height", $(document).height());

to set the height of your screen on each direct child div of your body tag.