使用Bootstrap,我如何创建多个全屏div以相互堆叠

我想创建一个包含多个100%div的页面,堆叠在一起.类似于Bootstrap封面模板示例,但在第一个屏幕下面有额外的div.我已经尝试过四处寻找,但一直无法找到解决方案.我知道它在那里,也许我只是在寻找错误的东西.

使用100%高度的div不能解决您的问题.既然你已经在看Bootstrap了,我认为你不怕使用Javascript或Jquery.因此,您可以使用这个小代码来设置div的高度始终是屏幕的100%.

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

使用这个小代码,将设置包裹您的部分的div的高度.因此,对于需要窗口高度(100%)的网站的每个部分,您必须使用"包装"div.所以它会是这样的:

    
Section 1!
    
This is just an section with the same height as your browser.


    
Section 2!
    
This is just an section with the same height as your browser.

如果你想要一个例子,你可以看看我的投资组合:http://portfolio.stikkie.net/

关键是要提醒html和正文,它们可以达到100%的高度.:小提琴

ps你不需要bootstrap

HTML

    first



    second



    third

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