Question

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

Answer 1

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

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

<div id="main_body">&nbsp;

Answer 2

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

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

Answer 3

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

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

3 个答案: