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.

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/