web-dev-qa-db-fra.com

comment faire une hauteur DIV de 100% entre l'en-tête et le pied de page

Existe-t-il un moyen de configurer une mise en page de sorte que l'en-tête soit de 50 pixels, le corps de 100% et le pied de page de 50 pixels?

J'aimerais que le corps utilise au minimum toute la zone de visualisation. Je voudrais que le pied de page et l'en-tête soient toujours affichés à l'écran

htmlcsscss-positionsticky-footer
18
Arcadian

J'ai créé un exemple dans jsfiddle:

MISE À JOUR JsFiddle: http://jsfiddle.net/5V288/1025/

HTML:

<body>
    <div id="header"></div>
    <div id="content"><div>
        Content 
    </div></div>
    <div id="footer"></div>
</body>

CSS:

html { height: 100%; }
body {
    height:100%;
    min-height: 100%;
    background: #000000;
    color: #FFFFFF;
    position:relative;
}
#header {
    height:50px;
    width:100%;
    top:0px;
    left:0px;
    background: #CCCCCC;
    position:fixed;
}
#footer {
    height:50px;
    width:100%;
    bottom:0px;
    left:0px;
    background: #CCCCCC;
    position:fixed;
}
#content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:100%;
    padding: 0 20px;
}
#content > div {
    padding: 70px 0;
}

Sans bordure, le contenu sera à hauteur 100% + 140px de rembourrage. Avec la bordure, la hauteur du contenu sera de 100% et le rembourrage sera à l'intérieur.

15
WolvDev

Juste une solution pour la solution Andreas Winter:

http://jsfiddle.net/5V288/7/

* Avec la solution, vous auriez des problèmes si le contenu est supérieur à la zone de fenêtre disponible.

4
Oswaldo Acauan

Je pense que ce que vous recherchez est "plusieurs coordonnées absolues". Un List Apart a une explication ici mais en gros, il vous suffit de spécifier la position du corps en absolu et de définir les deux top: 50px et bottom: 50px:

<body>
<style>
#header {
  position: absolute;
  height: 50px;
} 

#body {     
  position: absolute;
  top: 50px;
  bottom: 50px;
  background-color: yellow;
}

#footer {
  position:absolute;
  height: 50px;
   bottom: 0;
}
</style>
<div id="header">Header</div>
<div id="body">Content goes here</div>
<div id="footer">Footer</div>

http://www.spookandpuff.com/examples/absoluteCoordinates.html montre la technique d'une manière plus jolie.

3
Dan Dascalescu