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

时间:2010-01-22 11:57:59

标签: html css firefox

我希望有一个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中将边距更改为填充时,它可以正常工作。

3 个答案:

答案 0 :(得分:1)

事实上,它在IE8,FF3.5和Webkit浏览器以及Opera中不起作用。

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

<div id="main_body">&nbsp;

答案 1 :(得分:1)

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

顺便提一下,在重置*时,你应该看看Eric Meyers CSS重置http://meyerweb.com/eric/tools/css/reset/,因为重置一切都会导致问题。

答案 2 :(得分:0)

它适用于FF 3.5.7。 您可以尝试将定位从相对设置为静态,这可能会解决它。 让我知道!