Make Div Take 100% Of Browser Window Height

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

Solution 1:

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

<divclass="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

Solution 2:

Try putting height: 100%; in your div's CSS.

Solution 3:

make your body element 100% hight, then make the div inside 100% hight

Solution 4:

You have to style your body to 100% before you can make your div 100%

html, body{
    height:100%;
}

div{
    height:100%;
}

Solution 5:

Rather then using 100% (which will take 100% of the body, but the body may be bigger or smaller then the browser actual visible size), I suggest using the units vh and vw

100vh will take 100% of view hight and 100vw will take 100% of view width. This unit will take 100% of the visible browser screen, no matter what.

CSS:

body{
   height:100vh;
   width:100vw;
}

Here are some more detailed information about these measurements