我有一個div是100％寬180px高 - 標題。整齊的定位和大小div
在下面，我想要一個白色的背景 - 內容div的權利延伸到底部）。目前我實現的方式是內容div總是在瀏覽窗口下方180px（幾乎像是180px向下滾動，無論瀏覽器窗口大小如何）。
此前我曾嘗試將溢出隱藏在上面，但對於實際內容，它可能不得不向下滾動，因此我不想禁用此功能。
下面是我想要的圖形：
有誰知道一種方法來抵消這一點？
編輯：
道歉不明確。我希望內容div在任何情況下都伸展到窗口的底部，但將值設置爲100％對我來說並不算什麼好處，因爲它比視口低180px，因爲標題會將其壓低。
<!DOCTYPE html><html><head></head><body style='background:black;'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:180px;' align='center'><div style='width:900px;background:blue;'>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div></div>
<div style='position:absolute;width:100%;height:180px;left:0px;top:0px;background:white;;'>header</div>
</body></html>
版本2.0（HAHAH笑）：
<!DOCTYPE html><html><head></head><body style='background:black;'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'>
<div style='width:900px;height:100%;background:blue;' align='center'>
<div style='position:fixed;width:900px;height:100%;background:blue;display:block;' align='center'>
</div>
</div>
</div>
<div style='position:absolute;width:100%;left:0px;top:180px;' align='center'>
<div style='width:900px;' align='center'>
hello<br><br><br><br><br><br><br><br>aaa<br><br><br><br><br><br><br><br><br><br><br><br>bbb<br><br><br><br><br><br><br><br><br><br>ccc<br><br><br><br><br><br><br>ddd<br><br><br><br><br><br><br><br><br
><br><br><br>eee
</div>
</div>
<div style='position:absolute;width:100%;height:180px;left:0px;top:0px;background:white;;'>header</div>
</body></html>
嘗試一下，我認爲這是你在尋找什麼！ :) 所以你首先添加100％的寬度和高度div來填滿整個屏幕，並且所有的div都位於中心位置，並且在中心你添加另一個diw，這將允許說900寬度，這裏將是所有內容。之後，你添加標題，這是100％寬度和180高度所有這些divs的位置是絕對的，所以你可以鍵入每一個去。頂部0px左側0px的標題和內容頂部180px，所以它會變成標題之後！ :)
position: relative; top: 0; bottom: 0;關於內容div。這應該拉伸到底部。
怎麼樣，你需要有一個內容div和一個內容容器div，容器......包含內容！ :)你需要擺弄這些，直到你得到你想要的東西，但主要問題是使用bottom：0和每個元素的位置。
content {bottom:0; min-height:180px; position:absolute;}
content-container {position:relative;}
您認爲是對的，但要記住的一件重要事情是body和html元素需要寬度和高度設置爲100％。
對此例子看看：
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: gray;
}
#header {
background: red;
height: 100px;
width: 100%;
}
#main {
background: blue;
height: 100%;
width: 400px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="main"></div>
</body>
</html>
如果你運行它，你會看到唯一的問題是一個滾動條顯示。那是因爲#main div將具有窗口高度，並且標題中有更多100px。
我建議的解決方案是將標題浮在主div上，然後在#main內部添加另一個div，絕對定位100px波紋管，這樣您就可以在其中工作而不會有太多麻煩。完整的代碼是：
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: gray;
}
#header {
background: red;
height: 100px;
width: 100%;
position: absolute;
top: 0;
z-index: 20;
}
#main {
background: blue;
height: 100%;
width: 400px;
margin: 0 auto;
position: relative;
z-index: 10;
}
#main #content {
position: absolute;
top: 100px;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="main">
<div id="content">
<p style="margin:0">Paragraph</p>
</div>
</div>
</body>
</html>
確保您使用重置文件。像段落元素那樣的邊距會使佈局變得相當混亂。
更新： 正如指出的那樣，該解決方案帶來了溢出問題。因此，這裏是一個更好的版本：
更改2 CSS塊如下：
#main {
background: blue;
min-height: 100%; /* Changed */
width: 400px;
margin: 0 auto;
position: relative;
z-index: 10;
}
#main #content {
padding-top: 100px; /* Changed */
}
，並確保標記是這樣（如最後一個示例）：
<div id="header"></div>
<div id="main">
<div id="content">
<!-- Content goes here -->
</div>
</div>
應訣竅！
我使用了與粘性頁腳http://ryanfait.com/sticky-footer/相同的技術。看看這個小提琴http://jsfiddle.net/kuyabiye/K5pYe/
什麼是真正的問題？ – Spliffster 2011-01-26 16:31:25
`overflow：scroll`？ – Eray 2011-01-26 16:32:30
他希望內容div始終伸展到瀏覽器視口的底部。 – Chris 2011-01-26 16:32:41