Using Bootstrap, How Can I Create Multiple Fullscreen Div's To Stack On One Another

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 sc

Solution 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/

Solution 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;
}

Solution 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

Solution 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.