我希望有一个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中将边距更改为填充时,它可以正常工作。
答案 0 :(得分:1)
事实上,它在IE8,FF3.5和Webkit浏览器以及Opera中不起作用。
我不记得实际的原因,但如果你添加一些东西,例如在“main_body”div之后的
,它可以正常工作。
<div id="main_body">
答案 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。 您可以尝试将定位从相对设置为静态,这可能会解决它。 让我知道!