設置高度100％不起作用

Question

由於某些原因，集裝箱的邊界儘管高度達到100％，仍然不會達到底部。這是我的代碼，容器在另一個div中心下。

的Html

<div id="center"> 
<div class="container" > 
</div> 
</div> 

CSS

#center { 
    float:left; 
    width:20%; 
    margin-top:10px; 
    height:100%; 
} 

.container { 
    margin-top:3px; 
    height:100%; 
    border:2px solid #dedede; 
    width:600px; 
} 

Answer 1

你必須包含在你的CSS這樣的事情...

body, html{ 
    height: 98%; 
    padding: 0; 
} 

與高度玩消除因對其中所包含的元素邊距和邊框垂直滾動條。

http://jsfiddle.net/4JgA4/1/

編輯：

否則，使其100％，減小主元件的高度內，以消除垂直滾動條。

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

#center { 
float:left; 
width:20%; 
margin-top:10px; 
height:90%; 
} 

.container { 
    margin-top:3px; 
    height:100%; 
    border:2px solid #dedede; 
    width:600px; 
} 

http://jsfiddle.net/4JgA4/3/

Answer 2

您的ID = '中心' 的div需要是裏面的東西與高度。

這有助於我 - 無論何時我將樣式設置爲寬度或高度= 100％，我都會問自己：「100％是什麼？這會促使我確定元素內部的元素是否也適合寬度和高度。

此外，在事物周圍放置不同的彩色邊框，以查看它們的真實位置和大小。它可能會造成尺寸縮小，但它會讓您很好地瞭解實際發生的情況。

Answer 3

對於工作的100％身高屬性，您需要設置父div的高度。

在你的情況下，作爲#center的父母的元素應該有一些高度讓你的CSS按預期工作。

Answer 4

通常情況下，無論您指定的高度如何，div都只能與其內容一樣高。你需要嵌套它們。爲了避免複雜性，我設置了最大高度，並對我想要位於容器底部的元素使用絕對定位。

作爲一種設計方法，您需要確保div的內容是您想要的高度。填充可以是一個非常有用的工具。你可以把荒謬的填充和隱藏溢出。然後它會在你的最大高度上封頂。