CSS Layout Help - Stretch div au bas de la page
Je suis en train de créer une mise en page avec un 'header' de la zone qui contient un logo et quelques liens, puis une zone de contenu qui doit s'étendre vers le bas de la page. C'est là que je suis coincé.
J'ai entouré l'en-tête et le contenu d'un div conteneur qui a une hauteur de 100%, cela fonctionne bien. Mais je ne peux pas ensuite de récupérer le contenu de la div pour étirer vers le bas de la div conteneur comme lui donnant une hauteur minimale de 100%, semble prendre de la hauteur à partir du corps de la page, donc je me retrouve avec une barre de défilement en raison de l'espace occupé au haut de la page à l'en-tête.
Voici un fil de fer qui, espérons-le fait que je suis en train de réaliser un peu plus clair...
Voici un rapide CSS exemple, cela fonctionne, à part qu'il y a toujours une barre de défilement à ce qui semble être la hauteur de la zone d'en-tête...
html, body {
height: 100%;
margin: 0;
padding: 0;
color: #fff;
}
body {
background-color: #000;
}
#container {
position: relative;
margin: 0 auto;
width: 1000px;
min-height: 100%;
}
#header {
padding-top: 26px;
}
#logo {
width: 194px;
height: 55px;
margin: 0 auto;
background-color: #fff;
}
#content {
margin-top: 10px;
position: absolute;
width: 1000px;
min-height: 100%;
background-color: #fff;
}
source d'informationauteur Accelebrate
Vous devez vous connecter pour publier un commentaire.
http://jsfiddle.net/CZayc/
cela fonctionne en enveloppant la tête et le corps dans une div pour pousser le pied de page en bas de
index.html
style.css
Faire le conteneur div en position:relative et le contenu de la div en position:absolute. Puis donner le contenu de la div en haut:<en-tête hauteur> bottom:0
Pas en mesure de tester ce droit maintenant, mais je pense que quelque chose comme cela devrait fonctionner.
limitations:
l'en-tête de la hauteur doit être statique, avec une hauteur absolue.
contenu de la hauteur dynamique.
Code CSS:
contenu étirer tout le chemin vers le bas, même lorsque le texte est court.
lorsque le contenu du texte est plus long que notre hauteur de la fenêtre - nous obtenir le défilement automatique
Exemple:
http://jsfiddle.net/fixit/p3B4s/3/