div的高度调整到分辨率

Question

我想知道是否可以将div调整到屏幕视图的高度。我想要实现的目标是让第一个div始终适应分辨率并将所有内容推到屏幕下方。对于任何分辨率，该灰色部分应该在屏幕外。我知道身高有点棘手，但这可能吗？

Answer 1

您可以使用：div {height:100vh;}

请参阅https://www.w3.org/TR/css3-values/#viewport-relative-lengths

  

大众单位

     

等于初始包含块宽度的1％。

     

在下面的示例中，如果视口宽度为200mm，则h1元素的字体大小为16mm（即（8×200mm）/ 100）。

   `h1 { font-size: 8vw }`

     

vh单位

   Equal to 1% of the height of the initial containing block. 

     

vmin unit

    Equal to the smaller of vw or vh. 

     

vmax单位

    Equal to the larger of vw or vh. 

另请参阅http://caniuse.com/#feat=viewport-units了解浏览器支持

Answer 2

CSS具有视口单元。试试这个：

height: 100vh

Documentation

<强>解释： 视口单元基于视口的百分比。

1vh：视口高度的1/100。

1vw：视口宽度的1/100。

Answer 3

CSS具有视口和视图高度单位（即vw和vh）

在CSS中添加：

div {
  height: 100vh;
}

Answer 4

您可以使用

div { width: 100%; height: 100%; min-width: 1000px; min-height: 1000px; }

这样div不能小于1000px，但它不适合移动浏览器。