我想要一个 div，当您在其中添加更多内容时它会增长，至少具有视口(viewport)的高度，并且有一个页眉和一个页脚贴在顶部和底部。我想出了以下在 IE7 中工作正常但在 ff3.5 中不起作用的方法。
这是 HTML(为 main_body 添加重复的“大量文本
”以超出视口(viewport)):
<!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 中将边距更改为填充时它工作正常。
最佳答案
100% 高度不是直截了当的。你需要做类似 http://www.xs4all.nl/~peterned/examples/csslayout1.html 的事情.
顺便说一下，在重置 * 的地方，您应该查看 Eric Meyers CSS Reset http://meyerweb.com/eric/tools/css/reset/因为重置一切可能会导致问题。
关于html - IE 和 FF 中的相对和绝对定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2117005/