HTML/CSS：刪除高度爲100％的垂直滾動;

我正在創建兩列，我想填充該頁面。很簡單。但是，我得到一個非常輕微的垂直滾動條。在html和body上設置margin: 0和padding: 0並未解決問題。HTML/CSS：刪除高度爲100％的垂直滾動;

我已經看過overflow: hidden，但我不喜歡它。我也考慮在底部放置一個clear:both div，但那沒有做任何事情。我已經看過使用min-height，但我似乎無法讓它正常工作。

我有兩個問題：

這是爲什麼垂直滾動條出現？
如何移除垂直滾動條？

HTML：

<body> 
    <div id="palette">Palette</div> 
    <div id="canvas">Content</div> 
</body>

CSS：

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

#palette { 
float: left; 
width: 300px; 
height: 100%; 
border: 1px solid black; 
} 

#canvas { 
margin-left: 300px; 
height: 100%; 
border: 1px solid blue; 
}

來源

2013-11-09 Keven

這是因爲1px的邊界上的元素的每一面。

100％+ 2px border（s）！= 100％。

您可以使用box-sizing將邊框包含在元素的高度。

jsFiddle example

div { 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
}

或者，你可以使用calc()減去2px的。

height: calc(100% - 2px);

jsFiddle example

來源

2013-11-09 20:58:58

是的，就是這樣。謝謝。我會接受，當它讓我。 – Keven

HTML/CSS：刪除高度爲100％的垂直滾動;

回答

相關問題