Auto-scaling divs

Answer to http://stackoverflow.com/q/10018296/508537. This shows how you can auto-size a div to make it fit the browser window when the content might be quite large.

by briguy37

HTML

<html>
    <body>
    <div class="a"></div>
    <div class="b"></div>
    <div id="c" class="c">asdf asfoji foij asdopjisdopfj sdopfij sdoifj opsdifj opsdifj posdif jopsidjf posidj fopisjdop fijsopdifjopsidjfop sij dfopji sdfasdf asfoji foij asdopjisdopfj sdopfij sdoifj opsdifj opsdifj posdif jopsidjf posidj fopisjdop fijsopdifjopsidjfop sij dfopji sdfasdf asfoji foij asdopjisdopfj sdopfij sdoifj opsdifj opsdifj posdif jopsidjf posidj fopisjdop fijsopdifjopsidjfop sij dfopji sdfasdf asfoji foij asdopjisdopfj sdopfij sdoifj opsdifj opsdifj posdif jopsidjf posidj fopisjdop fijsopdifjopsidjfop sij dfopji sdfasdf asfoji foij asdopjisdopfj sdopfij sdoifj opsdifj opsdifj posdif jopsidjf posidj fopisjdop fijsopdifjopsidjfop sij dfopji sdfasdf asfoji foij asdopjisdopfj sdopfij sdoifj opsdifj opsdifj posdif jopsidjf posidj fopisjdop fijsopdifjopsidjfop sij dfopji sdfasdf asfoji foij asdopjisdopfj sdopfij sdoifj opsdifj opsdifj posdif jopsidjf posidj fopisjdop fijsopdifjopsidjfop sij dfopji sdfasdf asfoji foij asdopjisdopfj sdopfij sdoifj opsdifj opsdifj posdif jopsidjf posidj fopisjdop fijsopdifjopsidjfop sij dfopji sdfasdf asfoji foij asdopjisdopfj sdopfij sdoifj opsdifj opsdifj posdif jopsidjf posidj fopisjdop fijsopdifjopsidjfop sij dfopji sdfasdf asfoji foij asdopjisdopfj sdopfij sdoifj opsdifj opsdifj posdif jopsidjf posidj fopisjdop fijsopdifjopsidjfop sij dfopji sdfasdf asfoji foij asdopjisdopfj sdopfij sdoifj opsdifj opsdifj posdif jopsidjf posidj fopisjdop fijsopdifjopsidjfop sij dfopji sdfopsdifj opsdifj posdif jopsidjf posidj fopisjdop fijsopdifjopsidjfop sij dfopji sdfasdf asfoji foij asdopjisdopfj sdopfij sdoifj opsdifj opsdifj posdif jopsidjf posidj fopisjdop fijsopdifjopsidjfop sij dfopji sdfasdf asfoji foij asdopjisdopfj sdopfij sdoifj opsdifj opsdifj posdif jopsidjf posidj fopisjdop fijsopdifjopsidjfop sij dfopji sdfopsdifj opsdifj posdif jopsidjf posidj fopisjdop fijsopdifjopsidjfop sij dfopji sdfasdf asfoji foij asdopjisdopfj sdopfij sdoifj opsdifj...

CSS

html, body{
    height: 100%
}

.a{
   background-color: yellow;
   height: 30px;  
   border: 2px solid red;
   border-bottom: 0px;
   margin: 0px 0px -4px 0px;  
}

.b{
   background-color: blue;
   height: 30px; 
   border: 2px solid red;
   border-bottom: 0px;    
}

.c{
   background-color: green;
   height: 80%;    
   overflow-y: scroll;  
   border: 2px solid red;   
}

JavaScript

var resizeDiv = function(){
    document.getElementById('c').style.height = getWindowHeight() - 64 + 'px';
};

//Framework code
var getWindowHeight = function(){
    if (window.innerHeight) {
        return window.innerHeight;
    }
    if (document.body && document.body.offsetHeight) {
        return document.body.offsetHeight;
    }
    if (document.compatMode=='CSS1Compat' &&
        document.documentElement &&
        document.documentElement.offsetHeight ) {
        return document.documentElement.offsetHeight;
    }
    
    return 740;//Window height method not supported
};

//resize on pageload
window.onresize = resizeDiv;
setTimeout(resizeDiv);