使div占据浏览器窗口高度的100％ [英] Make div take 100% of browser window height

问题描述

我如何确保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/？如果您希望在div上实现100视图高度（设备高度）样式，或者在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

how could I make sure that a div takes 100% of the height on every single screen resolution. Like here: https://medium.com/design-playbooks/designing-the-hiring-process-e0b59f3ee53, or here: http://blogs.wsj.com/briefly/2015/01/23/greece-austerity-relief-or-exit-the-short-answer/?mod=e2fb

解决方案

If you want to achieve a 100 view height (device height) styling on a div or other elements you can use something like this:

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

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

This sets the element size using viewport units, where 1 vh is 1% of the viewport's height and 1 vw is 1% of the viewport's width. You can also see an example here: https://dominikangerer.com/projects/github/bearded-cyril/ you can see there that I used this to assign 100vh to the aside on the left side.

Maybe this is relevant for you: http://caniuse.com/#search=vh

这篇关于使div占据浏览器窗口高度的100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！