Full viewport height scaling div just css no js… Possible?

Question

Ok, I\'m trying to get a div to scale and the height is always the height of the viewport. I\'m going to link to my examples as it needs some explaining.

www.madmediabli

Answer 1

You can use absolute positioning in a quite surprising way I surmise:

div#element {
  position: relative;
}

img.vertical {
  position: absolute;
  top: 0; // no need for px or em 
  bottom: 0;
}

A compliant browser should try to respect both the top and bottom directives, actually managing a full height.

Answer 2

Please see this: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

<div id="welcome">
   your content on screen 1
</div>

<div id="projects">
   your content on screen 2
</div>
div#welcome {
    height: 100vh;
    background: black;
}

div#projects {
    height: 100vh;
    background: yellow;
}

That's it.

Answer 3

html, body {
  height: 100%;
}

Read this article.