Question

我有一种情况，我需要保留html, body {height:100%;}，同时相对于.content添加边距或位置，以便从顶部向下推30px。问题是，这样做会导致滚动条出现在右侧 .content的高度会发生变化，因此如果高度增加，可能会出现滚动条。

我如何解决这个问题，以便在.content没有增加高度而不强制overflow-y: hidden;的情况下摆脱侧边滚动条？

继承我的小提琴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;}

Answer 1

一个简单的解决方案，身体margin:0;和padding:0;。
这样做的原因是重置边缘和填充上设置的所有默认值。

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

<强> DEMO

Answer 2

实际上，它与此无关。由于body上的默认边距，正在添加滚动条。默认情况下，body设置为margin:8px - 无论如何都在Chrome中。

只需设置body { margin:0px; }即可将其删除。

jsFiddle here - 删除垂直滚动条。

css - margin top会导致不必要的正文滚动条

2 个答案: