Question

我想要做的是设置多个div，每个div包含整个页面的内容。每个div应该在视口中居中并完全填充。每个连续的div应根据视口的可变高度垂直均匀分隔。例如，假设我有一个800x600的视图，那么每个div应该是这个大小并堆叠。所以，如果我向下滚动600px，我只会看到第2页div，1200px我只会看到第3页div。我没有任何代码或示例可供分享，而且我的精疲力尽的搜索也没有出现过这种情况。只用css这可能吗？

Answer 1

您只需提供html，body＆amp; div是height: 100%;：

html, body {
    height: 100%;
}
div {
    height: 100%;
    margin-bottom: 5px;
}

http://jsfiddle.net/KMMjv/

Answer 2

因为这会根据用户浏览器窗口的大小而有所不同，您需要使用JavaScript来检测屏幕高度并相应地定位它们。虽然您可以使用CSS（height: 100%;）设置每个div的高度，但您需要使用JS设置top。

这是一个有效的JSBin：http://jsbin.com/ogokef/edit#preview

Answer 3

使用以下单位： vh用于视口高度 vw用于视口宽度

html, body {
            height: 100vh;
           }
      div {
            height: 100vh;
            width: 100%; /* you can use 100vw too, but for height it must be vh */
          }

Div的垂直分页

3 个答案: