web-dev-qa-db-fra.com

Pouvez-vous donner une hauteur totale de 100% pour un div à 3 div si les div en haut et en bas sont en pixels?

Duplicate possible:
Des problèmes avec les DIV dans une cellule de tableau?

Ok, j'ai donc une tête et un pied de page avec un positionnement absolu et une hauteur de 144px. Le contenu div dans la zone centrale doit être la hauteur totale de la zone entre les deux.

Simplifié:

<style>
  .sandwich{
    position: absolute;
    height: 144px; 
    width: 100%; 
    left: 0;
  }
  #header{ top:    0px; }
  #footer{ bottom: 0px; }
</style>

<div id="header" class="sandwich"></div>
<div id="content"> Content </div>
<div id="footer" class="sandwich"></div>

Donc, fondamentalement, je veux une div qui est 100% - 288px. Au début, je pensais pouvoir faire une div de 100% x 100% avec un rembourrage de 144 en haut et en bas, puis insérer le contenu de la div à 100%, mais ma réflexion s’est égarée quelque part.

enter image description here

Voici un exemple que j'ai réalisé en utilisant 20% de hauteur pour les "couches de pain". (Ce que je ne peux pas faire sur ce projet) Utilisez 60% de hauteur pour le défilement "couche charnue" et mettez-le en haut: 20%;

htmlcsswebsite-designdesigncross-browser
1
Garet Claborn

Ajoutez simplement le CSS suivant:

html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
#content{
  position: absolute; 
  top: 144px; 
  bottom: 144px; 
  left: 0px;
  width: 100%;
  overflow: auto; 
}

Et hop.

0
Garet Claborn

Cela me semble peu importe la situation, vous voulez que le pied de page se trouve tout en bas de l'écran, même s'il n'y a pas de contenu entre l'en-tête et le pied de page. Est-ce exact? Si c'est le cas, vous recherchez une solution de type "pied collant". Il existe une multitude de méthodes, vous pouvez essayer celle-ci pour commencer avec: CssStickyFooter .

1
SubTypical

Utilisez position:fixed et z-index:10 sur la classe .sandwich pour que votre en-tête et votre pied de page restent statiques au-dessus du #content div, puis appelez body pour obtenir votre couleur d'arrière-plan rouge. pour remplir l'espace entre. Démo en direct ici.

<style>

    body{
        background-color:red;
        padding:0;
        margin:0;
    }

    .sandwich{
        position:fixed;
        height: 50px;
        width: 100%; 
        background-color:grey;
        z-index:10;
    }

    #header{ top: 0px;}
    #footer{ bottom: 0px;}

    #content{ position:absolute; top:50px; }  
</style>

<div id="header" class="sandwich"></div>
<div id="content"> Content goes here</div>
<div id="footer" class="sandwich"></div>
1
Nick