IE 和 FF 中的相对和绝对定位答案

【问题标题】：relative and absolute positioning in IE and FFIE 和 FF 中的相对和绝对定位
【发布时间】：2011-01-08 04:32:13
【问题描述】：

我希望有一个 div，当您在其中添加更多内容时它会增长，至少具有视口的高度，并且在顶部和底部有一个页眉和一个页脚。我想出了以下在 IE7 中运行良好但在 ff3.5 中不起作用的方法。

这是 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）当我在#content 中将边距更改为填充时它工作正常。

【问题讨论】：

标签： html css firefox

【解决方案1】：

100% 高度不是直截了当的。您需要执行类似http://www.xs4all.nl/~peterned/examples/csslayout1.html 的操作。

顺便说一句，在您重置 * 的地方，您应该查看 Eric Meyers CSS Reset http://meyerweb.com/eric/tools/css/reset/，因为重置所有内容都会导致问题。

【讨论】：

感谢您的链接 Jeepstone！第一个解决了我的问题。

【解决方案2】：

事实上，它在 IE8、FF3.5 和 Webkit 浏览器和 Opera 中对我不起作用。

我不记得实际原因，但如果你添加一些东西，例如&nbsp; 在“main_body” div 之后，它可以工作。

<div id="main_body">&nbsp;

【讨论】：

谢谢，当我听从你的建议时，它会部分起作用。当页面比视口长时，页脚不会粘在页面底部。
它需要一个不同的解决方案。您是否查看过 Jeepstone 的参考资料？

【解决方案3】：

它在 FF 3.5.7 中适用于我。您也可以尝试将定位从相对设置为静态，这可能会解决它。告诉我！

【讨论】：