使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％高度，然后使div在100％高度

Answer 4

你必须先塑造你的身体100％才能使你的div 100％

html, body{
    height:100%;
}

div{
    height:100%;
}

Answer 5

而不是使用100%（它将占据身体的100％，但身体可能比浏览器的实际可见尺寸更大或更小），我建议使用单位vh和{{ 1}}

vw将获得100％的视图高度，100vh将获得100％的视图宽度。无论如何，此单元将占用100％的可见浏览器屏幕。

<强> CSS：

100vw

Here是关于这些测量的一些更详细的信息