Box sizing layout with 100% height element with padding and border

by bgrins

HTML

<html>
    
<body>
<div id='header'>header</div>
<div id='content'>
    <div id='inner'>
        <div id='stuff'>
        
            =lorem(100)
        
        </div>
    </div>
</div>
<div id='footer'>footer</div>
</body>

</html>

CSS

html, body { height: 100%; margin:0; padding:0; }
#content { 
    height: 100%;
    padding:80px 10px;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;      
}

#inner { 
    height: 100%; 
    background:red;
    overflow-y:scroll; 
    border: solid 10px #333; 
    margin-top:-10px; /* fix border */
}


#stuff {height: 1000px; }

#header { position:absolute; top:0; left: 0; right:0; height: 60px; background: green; }
#footer { position:absolute; bottom:0; left: 0; right:0; height: 60px; background: cyan; }