6

我有一种情况，我需要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;}
4

2 回答 2

1

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

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

演示

于 2013-10-30T22:52:33.833 回答
1

实际上，这与它无关。滚动条被添加是因为body. 默认情况下，无论如何body都设置为margin:8px- 在 Chrome 中。

只需设置body { margin:0px; }删除它。

jsFiddle 这里- 垂直滚动条被移除。

于 2013-10-30T22:52:57.783 回答