Geek Answers Handbook

Css - margin top causes unwanted scrolling

I have a situation where I need to save html, body {height:100%;}when adding a field or position relatively .contentso that it pushes 30px from the top.
The problem is that this causes the scroll bars to appear on the right.
The height .contentwill change, so with increasing height there may be scroll bars.

How can I fix this to get rid of side scrollbars when it .contentdoesn't have increased height without forcing overflow-y: hidden;?

heres my fiddle 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;}
+4
source share
2 answers

, margin:0; padding:0; .
reset defauls, paddings.

html, body {height:100%; margin:0; padding:0;}

DEMO

+1

, . - body. body margin:8px - Chrome.

body { margin:0px; }, .

jsFiddle - .

+1

More articles:


All Articles