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

Answer 1

html, body {
  height: 100%;
}

Read this article.

Answer 2

Did you even bother to look at the code? Both examples I gave have that.

Heres an example that i made using js (I would rather not.)

http://www.madmediablitz.com/tv/intrinsic%5Fturned%5F90.html

resize the window to see the effect. It starts out full screen as I call the code on resize, I did this hastily to show what I want to achieve.

Answer 3

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

div#element {
  position: relative;
}

img.vertical {
  position: absolute;
  top: 0px;
  bottom: 0px;
}

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

Answer 4

I just tried your code and in FF3.5 It's not doing anything for me...do you have any links to this behavior and/or a demo?

I also updated the demo above, it now has the tv graphics in it and works fine except in firefox3.5, the images stretch weird.

The link is below.

http://www.madmediablitz.com/tv/intrinsic%5Fturned%5F90.html

Now some of you may say, it works decently with js, why are you still trying for CSS? Well, I really can't seem to find anything that says why it can't be done.