Height of div adjusting to resolution

Question

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 ?

Answer 1

you can use : 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.

In the example below, if the width of the viewport is 200mm, the font size of h1 elements will be 16mm (ie (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

Answer 2

CSS has viewport units. Try this:

height: 100vh

Documentation

Explanation : Viewport units are based on percentages of viewport.

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

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

Answer 3

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

Add This in your CSS:

div {
  height: 100vh;
}

Answer 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.