web-dev-qa-db-fra.com

Disposition CSS à 100% de la hauteur

Je sais que c'est une sorte de problème commun, et j'ai cherché des solutions, mais je n'ai pas pu trouver exactement ce que je cherchais.

Je voudrais convertir this en une disposition sans table.

enter image description here

Remarque: l'en-tête et le pied de page doivent être définis sur une hauteur fixe en pixels (50 pixels est correct).

Le principal problème que j'ai, c'est que je ne peux pas faire en sorte que cette "grande boîte" au milieu se comporte comme elle le fait lorsqu'elle est terminée avec des tables. Il existe des solutions qui fonctionnent bien pour un contenu de longueur variable (texte, images), mais je voudrais que cette boîte ressemble et se comporte comme une boîte - avec des bordures, des coins arrondis et tout.

csslayoutheight
37
ile

Vous pouvez le faire avec les propriétés CSS du style de table, mais conserver le balisage sans table (ce qui est toujours une victoire).

Exemple

Example

HTML

<div id="container">
    <div id="header"><div>header</div></div>
    <div id="content"><div>content</div></div>
    <div id="footer"><div>footer</div></div>
</div>

CSS

html,
body {
    height: 100%; 
    padding: 0;
    margin: 0;
}

#container {
    display: table; 
    width: 100%;
    height: 100%;
    border: 1px solid red;   
    text-align: center;
}

#container > div {   
    display: table-row;   
    width: 100%;
}

#container > div > div {   
    display: table-cell;   
    width: 100%;
    border-radius:10px; 

}

#header > div {
    height:50px; 
    border:solid 2px #aaa;
}

#content > div {
    height: 100%;    
    background:#f0f4f0; 
    border:solid 2px #5a5;
}

#footer > div {
    height:50px; 
    border:solid 2px #a55;
}

jsFiddle .

47
alex

"Plusieurs coordonnées absolues" est un bon moyen d'y parvenir. C'est lorsque vous positionnez absolument une boîte, puis donnez-lui les coordonnées supérieure et inférieure. Sans spécifier de hauteur, vous obtenez une boîte qui veut être à 10 pixels du haut et à 10 pixels des bords inférieurs de son parent.

Voici un exemple

Il y a un style spécifique à IE6 que vous devrez ajouter, si vous vous souciez de ce navigateur.

Voici un article sur la technique (plus le correctif IE6) - c'est une bonne chose à savoir, même si vous ne l'utilisez pas pour ce problème.

29
Ben Hull

Vous n'avez rien dit sur la hauteur de vos sous-éléments, j'ai donc dû faire quelques présomptions. Vous pouvez utiliser des pourcentages si vous le souhaitez.

<style>
html,body {margin:0;padding:0;
}
#mainContainer {
height:100%;
width:100%;
}

#header {
height:15%;
width:100%;
background-color:red;
}

#center {
height:75%;
width:100%;
background-color:blue;
}

#footer {
height:10%;
width:100%;
background-color:pink;
}
</style>

    <body>
    <div id="mainContainer">
    <div id="header">Header</div>
    <div id="center">Center</div>
    <div id="footer">Footer</div>

</div>

    </div>
    </body>
1
Layke