relative and absolute positioning in IE and FF_问答_开发者

relative and absolute positioning in IE and FF

开发者 https://www.devze.com 2022-12-17 23:46 出处：网络

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 whic

相关专题：css firefox

This is the HTML (add repeated 'Lots of text

' for main_body to grow out of the viewpor开发者_运维技巧t):

<!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.

In fact it doesn't work for me in IE8, FF3.5 and Webkit browsers and Opera.

I can't recall the actual reason but if you add a something e.g.   after the "main_body" div, it works.