CSS Full Screen - Position absolute vs 100% height

Question

When creating a full screen div in html & css one has two main options:

Using: html, body, #myDiv {height: 100%, width: 100%}

Or: #myDiv{position: absolute; top:0px; bottom:0px; width: 100%}

Is there any advantage of one over the other or can they just be used interchangeably?

Answer 1

Both produce the same effect i.e. have a full screen div. Now the only diff. is between the positioning attribute

Now when you have your css as

html, body, #myDiv {height: 100%, width: 100%} 

then the default position attribute is static which means that it will normally flow into the webpage

But when you apply

     #myDiv{position: absolute; top:0px; bottom:0px; width: 100%}

It is slightly different than the previous one. With position as absolute it means that this div is relative to the immediate parent element or if there is no parent element then it is relative to the page itself. You can see the effect if you have another div as parent element and u insert some text or an image into #myDiv Also an element with absolute position is removed from the flow of elements on the page which means it will not affect other elements and other elements will not affect it

You can check the jsfiddle link and see for yourself how the position of the text varies in both styles http://jsfiddle.net/sidarth1989/32szd39g/

Answer 2

Viewport relative units are now pretty well supported... so you could do this:

#myDiv {
  height: 100vh;
  width: 100vw;
}

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