20

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.madmediablitz.com/tv/precentdemo.html

The link above is the closest I've come to a solution and I'm hoping that someone here will find it simple to fix. What I want to happen is the tv to always be the height of the viewport (to a degree, min-height:~400px; max-height:~700px;). The code that I used there is based on http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/.

www.madmediablitz.com/tv/precentdemo_alt.html

This one is what I DON'T want to happen. IF you resize your window you will see it doesn't scale proportionally.

I've been trying both of these for about 2 days now and I haven't been able to get it to work. I'm literally praying for help as I think, this isn't too complicated.

  • Also, Ignore the fact that the tv doesn't line up 100%, that is my slicing error. –  Oct 02 '09 at 14:11

3 Answers3

43

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.

grossdm
  • 65
  • 5
pixparker
  • 2,903
  • 26
  • 23
  • 5
    If anyone is reading this, this should be the accepted answer. – stackular Jun 06 '14 at 14:17
  • 2
    Be aware, this will not work in Andorid 4.3 or lower, Opera mini, IE8 or lower, and is buggy in iOS 7.1 or lower. See: http://caniuse.com/#feat=viewport-units – Colton McCormack Jan 20 '15 at 18:55
  • Please add some explanation of why this code helps the OP. This will help provide an answer future viewers can learn from. See [answer] for more information. – Heretic Monkey Nov 09 '16 at 16:46
12
html, body {
  height: 100%;
}

Read this article.

eozzy
  • 66,048
  • 104
  • 272
  • 428
  • 2
    Please add some explanation of why this code helps the OP, in the answer itself, not on a third-party site. This will help provide an answer future viewers can learn from. See [answer] for more information. – Heretic Monkey Nov 09 '16 at 16:46
11

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.

Flummox - don't be evil SE
  • 2,109
  • 6
  • 24
  • 46
Matthieu M.
  • 287,565
  • 48
  • 449
  • 722