在具有「頁腳」的頁面上設置DIV的高度屬性

基本上我想讓中間的藍色身體部分滾動減去底部的滾動條。我知道我可以用javascript做到這一點，我正在尋找更多的CSS解決方案。在具有「頁腳」的頁面上設置DIV的高度屬性

在我的實際網站上，我有一個大約150px的div，它包含圖標/圖片來完成任務，然後其餘的內容也需要垂直滾動，我也想找到一個解決方案。雖然我可以穿越那座橋。

那麼有沒有辦法讓滾動條不會「溢出」底部30px？我知道我可以用另一個DIV模擬它（How to create div to fill all space between header and footer div），但我將動態添加/刪除元素，這對我來說確實不是一個可用的解決方案。

這裏是一個網頁我扔在一起，試圖解釋什麼，我試圖在這裏的一個例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Testing Page</title> 
<style TYPE="text/css"> 
HTML 
{ 
    height:100%; 
    overflow:hidden; 
} 
BODY 
{ 
    height:100%; 
    margin:0; 
    overflow:hidden; 
} 
DIV#content 
{ 
    height:100%; 
    margin-bottom:-30px; 
    background-color:blue; 
    overflow:auto; 
} 
</style> 
</head> 
<body> 
    <div style="height:20px;background-color:green;width:100%;">top bar</div> 
    <div id="content"> 
     main area 
     <div style="height:2000px;width:500px;background-color:yellow;">cool kids<div> 
    </div> 
    <div style="position:absolute;bottom:0;left:0;background-color:brown;height:30px;width:100%;">bottom bar</div> 
</body> 
</html>

感謝您的幫助。

來源

2010-01-26 numone

絕對定位。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Testing Page</title> 
<style TYPE="text/css"> 
HTML 
{ 
    height:100%; 
    overflow:hidden; 
} 
BODY 
{ 
    height:100%; 
    margin:0; 
    overflow:hidden; 
} 
DIV#content 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 30px; 
    background-color:blue; 
    overflow:auto; 
} 
</style> 
</head> 
<body> 
    <div style="height:20px;background-color:green;width:100%;">top bar</div> 
    <div id="content"> 
     main area 
     <div style="height:2000px;width:500px;background-color:yellow;">cool kids</div> 
    </div> 
    <div style="position:absolute;bottom:0;left:0;background-color:brown;height:30px;width:100%;">bottom bar</div> 
</body> 
</html>

來源

2010-01-26 20:13:03 CalebD

短暫地看着這看起來可行，謝謝！ – numone 2010-01-26 20:39:17

在DIV＃內容中，使用'top：20px'，它似乎也適用於我。 – Aaron 2010-01-26 20:53:27

使用一點JavaScript，我想我們可以解決你的問題。

<html> 
<head> 
<title>Testing Page</title> 
<style TYPE="text/css"> 

BODY 
{ 
    height:100%; 
    margin:0; 
    overflow:hidden; 
} 
DIV#header 
{ 
    top: 0px; 
    height: 20px; 
    width: 100%; 
    position: absolute; 
    background-color: green; 
} 
DIV#content 
{ 
    top: 20px; 
    bottom:30px; 
    width: 100%; 
    background-color:blue; 
    position: absolute; 
    overflow:auto; 
} 
DIV#footer 
{ 
    bottom: 0px; 
    height: 30px; 
    width: 100%; 
    background-color: red; 
    position:absolute; 
} 
</style> 
<script type="text/JavaScript"> 
function adjustContent() 
{ 
    document.getElementById("content").style.height = window.height-50; 
} 
</script> 
</head> 
<body onLoad="adjustContent()" > 
    <div id="header">top bar</div> 
    <div id="content"> 
     main area 
     <div style="height:2000px;width:500px;background-color:yellow;">cool kids</div> 
    </div> 
    <div id="footer">bottom bar</div> 
</body> 
</html>

隨着body onLoad事件，JavaScript將內容區域調整到正確的高度。滾動條不會超過頁腳，頁眉和頁腳停留在頁面的頂部和底部。

另外，在content div內動態添加內容不應該破壞這個佈局。

來源

2010-01-26 20:08:18 Aaron

Javascript是我唯一想到的其他解決方案，看起來我可能需要走這條路線。 – numone 2010-01-26 20:24:10

在具有「頁腳」的頁面上設置DIV的高度屬性

回答

相關問題