調整內容以適應高度CSS溢出？

如果height: 100%;伸展一個元素以適合其父高度，爲什麼它會溢出？我在幾個瀏覽器中測試，並且它們都顯示相同的問題。調整內容以適應高度CSS溢出？

我有這樣的結構

html 
>body 
>>container 
>>>header 
>>>content 
>>>footer

我想是拉伸內容高度使容器適合瀏覽器窗口

我試過一噸的不同的方法，使HTML和身高100％，去絕對和頂部和底部零...並沒有什麼真正的作品，每當我舒展內容頁腳跳出容器

這裏有一個例子：

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
html, body { 
position: absolute; 
left: 0; 
top: 0; 
right: 0; 
bottom: 0; 
} 
#container 
{ 
height: 100%; 
} 
#content 
{ 
min-height: 100%; 
} 
</style> 
</head> 
<body> 
<div id="container"> 
<div id="header"> 
1 
</div> 
<div id="content"> 
2 
</div> 
<div id="footer"> 
3 
</div> 
</div> 

</body> 
</html>

這是什麼問題，它爲什麼會熄滅？

來源

2012-08-02 kebrus

你給你的容器100％的高度。然後你添加div。你的內容div也有100％的高度。所以，所有的divs一起都是definitiv，然後是容器和溢出。你的內容高度混淆了它 – 2012-08-02 15:20:55

這只是我嘗試過的一個例子，我需要讓容器伸展內容，我說它佔據了100％的空間，我如何說內容佔據剩餘空間？ – kebrus 2012-08-02 15:34:10

然後只需製作一個固定位置的頁腳，並將頁腳的高度設置爲頁邊距。 – 2012-08-02 17:17:48

也許這可以解決您的問題。內部div需要加起來高達100％

body{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

#container 
{ 
    height: 100%; 
} 
#header{ 
    height: 20%; /*random number but all three should add up to 100%*/ 
} 
#content 
{ 
    min-height: 70%; /*random number*/ 
} 

#footer{ 
    height:10%; /*random number*/ 
}

來源

2012-08-02 15:36:19

，這是行不通的，因爲頁眉和頁腳對於我的情況都有固定的高度，因爲它們的內容沒有改變，它的內容發生了變化，我希望它在屏幕大於內容時增長 – kebrus 2012-08-02 15:48:55

調整內容以適應高度CSS溢出？

回答

相關問題