使div占浏览器窗口高度的100%

Question

如何确保一个div在每一个屏幕分辨率上占高度的100%。就像这里：https://medium.com/design-playbooks/designing-the-hiring-process-e0b59f3ee53，或者这里：http://blogs.wsj.com/briefly/2015/01/23/greece-austerity-relief-or-exit-the-short-answer/?mod=e2fb

Answer 1

如果希望在div或其他元素上实现100视图高度(设备高度)样式，则可以使用以下内容：

​

.full-height {
  height: 100vh;
}
.full-width {
  width: 100vw;
}
div {
  background: green;
}

<div class="full-height full-width"></div>

​

这使用视口单元设置元素大小，其中1 vh为视口高度的1%，1 vw为视口宽度的1%。您还可以在这里看到一个示例：https://dominikangerer.com/projects/github/bearded-cyril/ --您可以看到，我使用它将100vh分配到左侧的一边。

也许这和你有关：http://caniuse.com/#search=vh

Answer 2

尝试将height: 100%;放在div的CSS中。

Answer 3

使你的身体元素100%高，然后在100%高内做div。