Dom83
Habitué
Je vous propose de me suivre dans mon raisonnement, pas à pas, et de me dire où je me trompe svp.
Je prend le code de l'exemple du lien que m'a donné martien :
[cpp]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Exemple 2 : Positionner un footer avec CSS - étape 2</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
}
#container {
position: relative;
min-height: 100%;
}
#content {
padding: 10px;
background-color: #6caad9;
padding-bottom: 48px;
}
#footer {
position: absolute;
bottom: 0;
padding: 10px;
background-color: #0066b2;
width: 75%;
}
#footer h1 {
color: #fff;
padding-bottom: 0;
}
h1, p {
margin: 0;
padding-bottom: 1em;
}
h1 {
font-size: 12px;
line-height: 1.5em;
}
-->
</style></head>
<body>
<div id="container">
<div id="content">
<h1>Content</h1>
<p>Redimensionnez votre fenêtre pour observer comment se comporte votre pied de page 100% CSS.</p>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
fermentum a, accumsan et, neque.</p>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</div>
</body></html>[/cpp]
Je répete le contenu de "content" plusieurs fois, pour que cela soit plus grand que la fenetre.
Je m'aperçois que le pied de page suit le flux de la page et n'est donc plus visible, à moins bien-sur que l'on baisse avec l'ascenseur. Mais comme moi je veux qu'il soit tout le temps visible, je limite la hauteur de "container" en ajoutant " height: 100%;" et "overflow:hidden;" à son style.
Mon pied de page est maintenant fixé en bas de la fenetre. Mais il n'y a plus d'ascenseur, et il m'en faut un pour voir la totalité du contenu de "Content".
Puisque c'est le contenu de "Content" qui doit défiler et non celui de "Container", j'ajoute "overflow: auto;" et "height: 100%;" au style du bloc "Content".
J'obtiens alors le code suivant, qui me semble suffisant pour obtenir ce que je souhaite :
[cpp]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Exemple 2 : Positionner un footer avec CSS - étape 2</title><meta
http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
overflow:hidden;
}
#container {
position: relative;
min-height: 100%;
height: 100%;
overflow:hidden;
}
#content {
padding: 10px;
background-color: #6caad9;
padding-bottom: 48px;
overflow: auto;
height: 100%;
}
#footer {
position: absolute;
bottom: 0;
padding: 10px;
background-color: #0066b2;
width: 75%;
}
#footer h1 {
color: #fff;
padding-bottom: 0;
}
h1, p {
margin: 0;
padding-bottom: 1em;
}
h1 {
font-size: 12px;
line-height: 1.5em;
}
-->
</style></head>
<body>
<div id="container">
<div id="content">
<h1>Content</h1>
<p>Redimensionnez votre fenêtre pour observer comment se comporte votre
pied de page 100% CSS.</p>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
fermentum a, accumsan et, neque.</p>
<h1>Content</h1>
<p>Redimensionnez votre fenêtre pour observer comment se comporte votre
pied de page 100% CSS.</p>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
fermentum a, accumsan et, neque.</p>
<h1>Content</h1>
<p>Redimensionnez votre fenêtre pour observer comment se comporte votre
pied de page 100% CSS.</p>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
fermentum a, accumsan et, neque.</p>
<h1>Content</h1>
<p>Redimensionnez votre fenêtre pour observer comment se comporte votre
pied de page 100% CSS.</p>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
fermentum a, accumsan et, neque.</p>
<h1>Content</h1>
<p>Redimensionnez votre fenêtre pour observer comment se comporte votre
pied de page 100% CSS.</p>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
fermentum a, accumsan et, neque.</p>
<h1>Content</h1>
<p>Redimensionnez votre fenêtre pour observer comment se comporte votre
pied de page 100% CSS.</p>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
fermentum a, accumsan et, neque.</p>
<h1>Content</h1>
<p>Redimensionnez votre fenêtre pour observer comment se comporte votre
pied de page 100% CSS.</p>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
fermentum a, accumsan et, neque.</p>
<h1>Content</h1>
<p>Redimensionnez votre fenêtre pour observer comment se comporte votre
pied de page 100% CSS.</p>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
fermentum a, accumsan et, neque.</p>
<h1>Content</h1>
<p>Redimensionnez votre fenêtre pour observer comment se comporte votre
pied de page 100% CSS.</p>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
fermentum a, accumsan et, neque.</p>
<h1>Content</h1>
<p>Redimensionnez votre fenêtre pour observer comment se comporte votre
pied de page 100% CSS.</p>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
fermentum a, accumsan et, neque.</p>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</div>
</body></html>[/cpp]
Mais ça ne fonctionne pas.
Dans les deux navigateurs, le bloc "content" est trop grand, et descends lègerement en dessous de la taille de la fenetre, alors que moi je veux qu'il s'arrete avant le bas de la fenetre. Que fait "Content" de son "padding-bottom: 48px;" ?
Les blocs "content" et "footer" se supperposent, alors qu'ils ne devraient pas.
Dans Firefox, je n'ai qu'un ascenseur vertical : celui du bloc "content". C'est ce que je voulais ! Mais dans Internet Explorer, je me retrouve avec deux ascenseurs verticaux... Celui de "Content" est là, c'est bien, mais celui de la page n'a rien à faire là puisque aucun bloc ne peut dépasser de la page (leur taille étant fixée à 100% de la fenetre). Donc j'ajoute "overflow:hidden;" au style de "body", mais ça ne change rien.
Je désespère un peu...
Vous qui avez bien plus d'expérience que moi, voyez-vous où se trouve mon erreur ?
Je prend le code de l'exemple du lien que m'a donné martien :
Vous devez être connecté pour voir les liens.
[cpp]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Exemple 2 : Positionner un footer avec CSS - étape 2</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
}
#container {
position: relative;
min-height: 100%;
}
#content {
padding: 10px;
background-color: #6caad9;
padding-bottom: 48px;
}
#footer {
position: absolute;
bottom: 0;
padding: 10px;
background-color: #0066b2;
width: 75%;
}
#footer h1 {
color: #fff;
padding-bottom: 0;
}
h1, p {
margin: 0;
padding-bottom: 1em;
}
h1 {
font-size: 12px;
line-height: 1.5em;
}
-->
</style></head>
<body>
<div id="container">
<div id="content">
<h1>Content</h1>
<p>Redimensionnez votre fenêtre pour observer comment se comporte votre pied de page 100% CSS.</p>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
fermentum a, accumsan et, neque.</p>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</div>
</body></html>[/cpp]
Je répete le contenu de "content" plusieurs fois, pour que cela soit plus grand que la fenetre.
Je m'aperçois que le pied de page suit le flux de la page et n'est donc plus visible, à moins bien-sur que l'on baisse avec l'ascenseur. Mais comme moi je veux qu'il soit tout le temps visible, je limite la hauteur de "container" en ajoutant " height: 100%;" et "overflow:hidden;" à son style.
Mon pied de page est maintenant fixé en bas de la fenetre. Mais il n'y a plus d'ascenseur, et il m'en faut un pour voir la totalité du contenu de "Content".
Puisque c'est le contenu de "Content" qui doit défiler et non celui de "Container", j'ajoute "overflow: auto;" et "height: 100%;" au style du bloc "Content".
J'obtiens alors le code suivant, qui me semble suffisant pour obtenir ce que je souhaite :
[cpp]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Exemple 2 : Positionner un footer avec CSS - étape 2</title><meta
http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
overflow:hidden;
}
#container {
position: relative;
min-height: 100%;
height: 100%;
overflow:hidden;
}
#content {
padding: 10px;
background-color: #6caad9;
padding-bottom: 48px;
overflow: auto;
height: 100%;
}
#footer {
position: absolute;
bottom: 0;
padding: 10px;
background-color: #0066b2;
width: 75%;
}
#footer h1 {
color: #fff;
padding-bottom: 0;
}
h1, p {
margin: 0;
padding-bottom: 1em;
}
h1 {
font-size: 12px;
line-height: 1.5em;
}
-->
</style></head>
<body>
<div id="container">
<div id="content">
<h1>Content</h1>
<p>Redimensionnez votre fenêtre pour observer comment se comporte votre
pied de page 100% CSS.</p>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
fermentum a, accumsan et, neque.</p>
<h1>Content</h1>
<p>Redimensionnez votre fenêtre pour observer comment se comporte votre
pied de page 100% CSS.</p>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
fermentum a, accumsan et, neque.</p>
<h1>Content</h1>
<p>Redimensionnez votre fenêtre pour observer comment se comporte votre
pied de page 100% CSS.</p>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
fermentum a, accumsan et, neque.</p>
<h1>Content</h1>
<p>Redimensionnez votre fenêtre pour observer comment se comporte votre
pied de page 100% CSS.</p>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
fermentum a, accumsan et, neque.</p>
<h1>Content</h1>
<p>Redimensionnez votre fenêtre pour observer comment se comporte votre
pied de page 100% CSS.</p>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
fermentum a, accumsan et, neque.</p>
<h1>Content</h1>
<p>Redimensionnez votre fenêtre pour observer comment se comporte votre
pied de page 100% CSS.</p>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
fermentum a, accumsan et, neque.</p>
<h1>Content</h1>
<p>Redimensionnez votre fenêtre pour observer comment se comporte votre
pied de page 100% CSS.</p>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
fermentum a, accumsan et, neque.</p>
<h1>Content</h1>
<p>Redimensionnez votre fenêtre pour observer comment se comporte votre
pied de page 100% CSS.</p>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
fermentum a, accumsan et, neque.</p>
<h1>Content</h1>
<p>Redimensionnez votre fenêtre pour observer comment se comporte votre
pied de page 100% CSS.</p>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
fermentum a, accumsan et, neque.</p>
<h1>Content</h1>
<p>Redimensionnez votre fenêtre pour observer comment se comporte votre
pied de page 100% CSS.</p>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
fermentum a, accumsan et, neque.</p>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</div>
</body></html>[/cpp]
Mais ça ne fonctionne pas.
Dans les deux navigateurs, le bloc "content" est trop grand, et descends lègerement en dessous de la taille de la fenetre, alors que moi je veux qu'il s'arrete avant le bas de la fenetre. Que fait "Content" de son "padding-bottom: 48px;" ?
Les blocs "content" et "footer" se supperposent, alors qu'ils ne devraient pas.
Dans Firefox, je n'ai qu'un ascenseur vertical : celui du bloc "content". C'est ce que je voulais ! Mais dans Internet Explorer, je me retrouve avec deux ascenseurs verticaux... Celui de "Content" est là, c'est bien, mais celui de la page n'a rien à faire là puisque aucun bloc ne peut dépasser de la page (leur taille étant fixée à 100% de la fenetre). Donc j'ajoute "overflow:hidden;" au style de "body", mais ça ne change rien.
Je désespère un peu...
Vous qui avez bien plus d'expérience que moi, voyez-vous où se trouve mon erreur ?
t1cable: 
