正文和html高度100％使滾動條出現

Question

我知道這個問題已被問到，但我找到的解決方案不起作用。這裏是我的代碼：

body, html { 
    height: 100%; 
    background-color: white; 
} 
body { 
    margin: 0; 
    padding: 0; 
} 

問題是，一個垂直滾動條出現...你有任何想法我可以解決這個問題嗎？

預先感謝您

Answer 1

您可以防止出現任何元素與下面的CSS滾動條：

overflow: hidden 

Answer 2

有做不使用溢出的「hackish的」的方式：隱藏;如果你想知道但我認爲溢出：隱藏本身已經足夠好了。退房代碼：http://jsfiddle.net/rj3jecc1/

<div class="container"> 
    <div class="content">Content</div> 
    <div class="content">Content</div> 
    <div class="content">Content</div> 
</div> 

body,html{ 
    height:100%; 
    margin:0; 
    padding:0; 
} 
body{ 
    background:#ddd; 
} 
.container{ 
    padding-top:1px; 
} 
.content{ 
    background:#fff; 
    padding:20px; 
    margin:20px; 
} 

，當你的身體設置爲100％高度的問題是，如果你有邊距，它會「推」的直接子容器和超過100％的高度，導致滾動條出現。這就是爲什麼我添加了另一個1px的容器（甚至0.1，只要它>零）頂部填充，以防止這種解決方案在最新版本的主流瀏覽器中工作。

我不知道爲什麼你需要身高是100％，但我會盡量不指定它的身高，除非我知道我的內容太「矮」以適應身高（這不是常見的情況）。