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