Can you help me figure out how to create a responsive/fluid grid with 2 rows of content, one for ".tier1" and the other for ".tier2"? I want the contents to always fit inside the viewport dimensions, with ".tier1" taking up 60% of the height and ".tier2" taking up the remaining 40%. I'm not sure what the best approach is at the moment. I could use JavaScript to monitor the viewport dimensions and set heights accordingly, but I'm wondering if there's a way to achieve this using just CSS.
CSS
.content1 {
height: 60%;
}
.content2 {
height: 40%;
}
HTML
<div class="container">
<div class="tier">
<div class="content content1">
<img src="http://dummyimage.com/600x400/000/fff">
</div>
</div>
<div class="tier">
<div class="content content2">
<img src="http://dummyimage.com/600x400/dedede/fff">
</div>
</div>
</div>
Fiddle http://jsfiddle.net/EK6QT/1/