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 }` 

甚高頻單位

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

vmin單位

  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

文檔

說明 ：視口單位基於視口的百分比。

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不能小於1000像素，但對移動瀏覽器來說不是很好。