positionnement relatif et absolu dans IE et FF

Je veux avoir un div qui grandit quand vous ajoutez plus de contenu, il a au moins la hauteur de la fenêtre et a un en-tête et un pied de page collant en haut et en bas. J'ai trouvé ce qui suit qui fonctionne très bien dans IE7 mais ne fonctionne pas dans ff3.5.positionnement relatif et absolu dans IE et FF

C'est le HTML (ajouter répétée 'Beaucoup de texte
' pour main_body se développer hors de la fenêtre):

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

Ceci est le 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); 
    }

Je pense que cela devrait travailler selon les spécifications. Et c'est dans IE mais pas dans ff3.5. Pleae aide.

EDIT: j'ai découvert (grâce à Jeepstone) que cela fonctionne très bien quand je change de marge de rembourrage en #content.

Source

2010-01-22 jzp74

La hauteur de 100% n'est pas simple. Vous devez faire quelque chose comme http://www.xs4all.nl/~peterned/examples/csslayout1.html. Par ailleurs, lorsque vous réinitialisez *, vous devriez regarder la réinitialisation CSS d'Eric Meyers http://meyerweb.com/eric/tools/css/reset/ car la réinitialisation de tout peut causer des problèmes.

Source

2010-01-22 12:19:45 Jeepstone

Merci pour vos liens Jeepstone! Le premier a résolu mes problèmes. – jzp74

Cela fonctionne pour moi dans FF 3.5.7. Vous pouvez également essayer de définir le positionnement relatif à statique, ce qui peut le résoudre. Laissez-moi savoir!

Source

2010-01-22 12:14:26 Eggie

En fait cela ne fonctionne pas pour moi dans les navigateurs IE8, FF3.5 et Webkit et Opera.

Je ne me souviens pas de la raison réelle, mais si vous ajoutez un élément, par ex.   après le div "main_body", ça marche.

<div id="main_body">&nbsp;

Source

2010-01-22 12:16:23

Merci, cela fonctionne en partie quand je suis votre suggestion. Lorsque la page est plus longue que la fenêtre, le pied de page ne colle pas au bas de la page. – jzp74

Il faudra une solution différente pour cela. Avez-vous vérifié les références de Jeepstone? –

positionnement relatif et absolu dans IE et FF

Répondre

Questions connexes