在IE和FF中的相對和絕對定位

我想有一個增長的div，當你添加更多的內容，至少有視口的高度，並有一個頁眉和頁腳堅持頂部和底部。我想出了以下在IE7中正常工作，但在ff3.5中不起作用。在IE和FF中的相對和絕對定位

這是HTML（添加重複 '文本
的地段' 的main_body長出來的視口）：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> 
<title>Testing 123</title> 
<link rel="stylesheet" href="css/testing.css"> 
</head> 
<body> 
<div id="main_body"> 
    <div id="header"></div>  
    <div id="content"> 
    Lots of text<br> 
    </div> 
    <div id="footer"></div>  
</div> 
</body> 
<html>

這是CSS：

* { 
    margin: 0px 0px 0px 0px; 
    padding: 0px 0px 0px 0px; 
    border: none; 
    z-index: 10; 
    font-family: Arial; 
    font-size: 20px; 
    text-decoration: none; 
    text-align: left; 
    } 
html, body { 
    height: 100%; 
    background-color: rgb(255, 255, 255); 
    } 
#main_body { 
    position: relative; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0px 20px 0px 20px; 
    } 
#header { 
    position: absolute; 
    top: 20px; 
    left: 0px; 
    height: 50px; 
    width: 100%; 
    background-color: rgb(40, 40, 40); 
    } 
#content { 
    margin: 80px 10px 50px 10px; 
    }  
#footer { 
    position: absolute; 
    bottom: 20px; 
    left: 0px; 
    height: 20px; 
    width: 100%; 
    background-color: rgb(40, 40, 40); 
    }

我認爲這應該根據規格工作。它在IE中，但在ff3.5中沒有。求助。

編輯： 我發現（感謝Jeepstone）它，當我在＃內容改變保證金以填充工作正常。

來源

2010-01-22 jzp74

100％身高並不是直截了當的。你需要做一些像http://www.xs4all.nl/~peterned/examples/csslayout1.html。順便說一下，在重置*的地方，你應該看看Eric Meyers CSS Reset http://meyerweb.com/eric/tools/css/reset/，因爲重置所有東西都會導致問題。

來源

2010-01-22 12:19:45 Jeepstone

感謝您的鏈接Jeepstone！第一個解決了我的問題。 – jzp74 2010-01-22 13:30:31

它適用於FF 3.5.7中的我。您可以嘗試將相對於靜態的位置設置爲可以解決的位置。讓我知道！

來源

2010-01-22 12:14:26 Eggie

事實上，在IE8，FF3.5和Webkit瀏覽器和Opera中，它並不適用於我。

我不記得實際的原因，但如果你添加一些東西，例如 之後的「main_body」div，它的作品。

<div id="main_body">&nbsp;

來源

2010-01-22 12:16:23

謝謝，它部分適用於我遵循您的建議。當頁面長於視口時，頁腳不會粘在頁面的底部。 – jzp74 2010-01-22 12:50:14

這需要一個不同的解決方案。你檢查過吉普斯通的參考資料嗎？ – 2010-01-22 12:59:03

在IE和FF中的相對和絕對定位

回答

相關問題