Question

我想创建一个包含多个100％div的页面，堆叠在一起。与Bootstrap Cover Template Example类似，但第一个屏幕下方还有其他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％的高度。：fiddle

P.S。你不需要引导

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％。这里是 Fiddle

Answer 4

要管理多个 - 全屏 - 堆叠的div，你必须使用除了css之外的javascript，因为css不能根据你的屏幕大小在元素上做出100％的高度。例如，添加：

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

在身体标记的每个直接子div上设置屏幕的高度。

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

4 个答案:

HTML

CSS