如何使用滾動條（溢出時）和底部固定頁腳製作自動高度內容？

model 如何使用滾動條（溢出時）和底部固定頁腳製作自動高度內容？

有可能嗎？是|否| JavaScript的？

好的。我會盡力。

這裏必須是：

標題。固定大小，固定位置（頂部）

內容。動態高度取決於窗口，頁眉和頁腳大小。如果溢出，請滾動。

頁腳。總是在底部固定位置。固定大小。

窗口。 No Scroll（！important）

ps。窗口。有一個錯誤或什麼的。如果它是Firefox或Opera鍵「向下」 - 向下滾動。即使「不滾動」 - 隱藏指定。

希望都清楚

完成。 Tnx。

<html> 
<head> 
<style type="text/css"> 
* { padding: 0; margin: 0;} /* do not use universal selector this is just for example */ 
#header{ 
    top:0; 
    left:0; 
    right:0; 
    height: 150px; 
    position:absolute; 

} 
#content { 
    position: absolute; 
    bottom: 150px; /*footer height*/ 
    top:150px; /* header height */ 
    left: 0; 
    right: 0; 
    background: yellow; 
    overflow: auto; 
} 

#footer { 
    position: absolute; 
    height: 150px; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: red; 
} 
</style> 
</head> 
<body> 
<div id='header'> 
Header content 
</div> 
<div id="content"> 
    dynamic content here 
</div> 
<div id="footer"> 
</div> 
</body> 
</html>

來源

2010-12-16 lazycommit

你真的可以做出一些更好的問題。

<html> 
<head> 
<style type="text/css"> 
* { padding: 0; margin: 0;} /* do not use universal selector this is just for example */ 
#content { 
    position: absolute; 
    top: 0; 
    bottom: 150px; 
    left: 0; 
    right: 0; 
    background: yellow; 
    overflow: auto; 
} 

#footer { 
    position: absolute; 
    height: 150px; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: red; 
} 
</style> 
</head> 
<body> 
<div id="content"> 
</div> 
<div id="footer"> 
</div> 
</body> 
</html>

來源

2010-12-16 15:44:29

我試過了。 TNX – lazycommit 2010-12-16 16:05:02

你好和歡迎＃1，

能否請您發表更具體的問題？只要在標題中寫下一些內容，並且有一個真正的問題，比如「這是可能的？yes | no | javascript？」不幫助任何人。

回答你的問題：是的，這是可能的。你只需要使用一些CSS。

來源

2010-12-16 15:09:57 DKSan

有一個圖像的鏈接，我正好需要麪包板。我有一些英語問題。所以，我畫了它。 – lazycommit 2010-12-16 15:47:00

如何使用滾動條（溢出時）和底部固定頁腳製作自動高度內容？

回答

相關問題