div的高度调整到分辨率

I am wondering if it is possible to make div adjust to height of screen view. What I want to achieve, is to make the first div always adapt to resolution and push everything beneath off screen. That greyish part should be off screen for any resolution. I know height is a bit tricky, but is this possible ?

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

4 个解决方案

#1

CSS Has Viewport and viewheight units(namely vw and vh)

CSS具有视口和视图高度单位(即vw和vh)

Add This in your CSS:

在CSS中添加:

div {
  height: 100vh;
}

#2

you can use : div {height:100vh;}

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

see https://www.w3.org/TR/css3-values/#viewport-relative-lengths

vw unit

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

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

In the example below, if the width of the viewport is 200mm, the font size of h1 elements will be 16mm (i.e. (8×200mm)/100).

在下面的示例中,如果视口的宽度是200mm,则h1元素的字体大小将是16mm(即(8×200mm)/ 100)。
   `h1 { font-size: 8vw }`
vh unit
   Equal to 1% of the height of the initial containing block. 
vmin unit
    Equal to the smaller of vw or vh. 
vmax unit
    Equal to the larger of vw or vh. 

See also http://caniuse.com/#feat=viewport-units for browsers support

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

#3

CSS has viewport units. Try this:

CSS有视口单元。尝试这个:

height: 100vh

Documentation

Explanation: Viewport units are based on percentages of viewport.

说明:视口单元基于视口的百分比。

1vh: 1/100th of the height of the viewport.

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

1vw: 1/100th of the width of the viewport.

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

#4

You can use

您可以使用

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

That way div can't be smaller then 1000px, but its not good for mobile browsers.

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

#1