css - 保證金頂部導致不需要的身體滾動條

我有一種情況，我需要保持html, body {height:100%;}，而相對於.content添加保證金或位置，以便它從頂部下降30px。
問題是，這樣做會導致滾動條出現在右側。
.content的高度將改變，因此如果高度增加，可能會出現滾動條。css - 保證金頂部導致不需要的身體滾動條

我該如何解決這個問題，以便在沒有強迫overflow-y: hidden;的情況下.content沒有增加高度時擺脫邊滾動條？

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

來源

2013-10-30 t q

一個簡單的解決方案，margin:0;和padding:0;在身上。
原因是重置所有在邊距和填充上設置的默認值。

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

DEMO

來源

2013-10-30 22:52:33

實際上，它沒有任何關係這一點。由於body上的默認邊距，正在添加滾動條。默認情況下，body設置爲margin:8px - Chrome中無論如何。

只需設置body { margin:0px; }即可將其刪除。

jsFiddle here - 垂直滾動條被刪除。

來源

2013-10-30 22:52:57

css - 保證金頂部導致不需要的身體滾動條

回答

相關問題