几个容器，每个容器的高度均为100％

Question

我想用twitter bootstrap创建以下布局。每个容器下面的几个容器和每个容器的高度等于浏览器屏幕高度。用户可以在其中向上和向下滚动。我正在寻找在bootstrap中准备好的东西 - .container-browser-height或什么？

我做了编辑以分享经验教训。在twitter bootstrap中，没有用于此目的的类。我搜索了代码。所以Krzysztof Krawiec的答案解决了这个问题。

Answer 1

我不认为bootstrap有预制组件的全窗高度。 无论如何，你可以通过编写自己的课程来实现这种效果。

＆＃13;

＆＃13;

.fullVH{
    width: 200px;
    height: 100vh;
    display: block;
}

＆＃13;

<div class="fullVH" style="background:green">1</div>
<div class="fullVH" style="background:red">2</div>
<div class="fullVH" style="background:blue">3</div>

＆＃13;

＆＃13;

＆＃13;

这里的诀窍是使用视口高度：100vh; 而不是使用高度：100％; 希望这会有所帮助。