在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中的相对和绝对定位

回答

相关问题