I am faced with a scenario where I need to maintain html, body {height:100%;} but also add margin or position relative to the .content so that it is pushed down 30px from the top.
The issue arises when scrollbars appear on the right due to this adjustment.
As the height of .content changes dynamically, scrollbars may appear if the height increases.
Is there a way to resolve this issue without having to resort to overflow-y: hidden;? I want to eliminate the side scrollbars when the height of .content does not increase.
Here's the fiddle for reference: http://jsfiddle.net/nalagg/5bwBx/
HTML:
<div id='container'>
<div class='header'></div>
<div class='content'></div>
<div class='footer'></div>
</div>
CSS:
html, body {height:100%;}
#container{height:100%; width:400px; margin:0 auto; background-color:grey;}
.header{ height:20px; width:400px; background-color:red;}
.content{ height:200px; width:400px; position:relative; top:30px; background-color:blue; }
.footer{ height:20px; width:400px; background-color:green;}