在IE和FF中的相对和绝对定位 [英] relative and absolute positioning in IE and FF
问题描述
我想要增加一个div，当你添加更多的内容，至少有视口的高度，并有一个页眉和页脚坚持顶部和底部。我想出了以下在IE7中工作正常，但在ff3.5不起作用。
$ b
这是HTML（添加重复的很多文字
'：
$ b
<！DOCTYPE html PUBLIC - // W3C // DTD HTML 4.01 // ENhttp://www.w3.org/TR/html4/strict.dtd\">
< html>
< head>
< meta content =text / html; charset = ISO-8859-1http-equiv =content-type>
< title>测试123< / title>
< link rel =stylesheethref =css / testing.css>
< / head>
< body>
< div id =main_body>
< div id =header>< / div>
< div id =content>
很多文字< 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;
最低身高：100％;
height：auto！important;
身高：100％;
margin：0px 20px 0px 20px;
}
#header {
position：absolute;
top：20px;
left：0px;
height：50px;
宽度：100％;
background-color：rgb（40，40，40）;
}
#content {
margin：80px 10px 50px 10px;
}
#footer {
position：absolute;
bottom：20px;
left：0px;
height：20px;
宽度：100％;
background-color：rgb（40，40，40）;
}
我认为这应该符合规格。它在IE中，但在ff3.5中没有。 Pleae help。
编辑：
我发现（谢谢Jeepstone） ＃内容。
100％身高并不是直截了当的。你需要做一些像 http://www.xs4all.nl/~peterned/例子/ csslayout1.html 。
顺便说一下，在你重置*的地方，你应该看看Eric Meyers CSS Reset http://meyerweb.com/eric/tools/css/reset/ 重置所有内容都可能导致问题。
I want to have a div that grows when you add more content in it, has at least the height of the viewport and has a header and a footer sticking to the top and bottom. I came up with the following which works fine in IE7 but doesn't work in ff3.5.
This is the HTML (add repeated 'Lots of text
' for main_body to grow out of the 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>
This is the 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);
}
I think this should work according to specs. And it does in IE but not in ff3.5. Pleae help.
EDIT: I found out (thanks to Jeepstone) that it works fine when I change margin to padding in #content.
100% height is not straight forward. You need to do something like http://www.xs4all.nl/~peterned/examples/csslayout1.html.
Incidentally, where you are resetting *, you should look at Eric Meyers CSS Reset http://meyerweb.com/eric/tools/css/reset/ as resetting everything can cause problems.
这篇关于在IE和FF中的相对和绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
