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

Question

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

Answer 1

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

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

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

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

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

Answer 2

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

ps你不需要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

我正在使用具有以下 css 的部分，它覆盖了整个屏幕。这应该有帮助。

CSS

.section{ height:100vh; }.

1vh = 视口高度的 1% 和 100vh = 高度的 100%。这是 小提琴