Comment puis-je faire une mise en page de bordure en utilisant css?

Question

Je souhaite créer une mise en page de bordure pour une application Web, dans laquelle un en-tête et un pied de page de taille fixe, une barre latérale et un contenu de centre principal se développent pour remplir l'espace restant. Pensez-y comme votre navigateur, où les barres d'outils et la barre d'état ont une taille fixe, la barre latérale peut changer de taille, mais le site Web au centre se développe pour remplir la taille restante.

edit: Pour clarifier, je veux spécifier la hauteur de la conception entière en pixels, par exemple 600px. Ensuite, je veux que la barre latérale et les divs du centre se dilatent pour remplir l'espace disponible, même si leur contenu n'est pas assez grand pour remplir l'espace. L'analogie webbrowser peut être utilisée ici aussi. Même si la page que vous regardez dans le navigateur n'est pas plus grande que la fenêtre du navigateur, le navigateur ne se redimensionne pas.

Y at-il un moyen de le faire dans css?

Answer 1

La méthode que vous faites référence à des sons comme un travail pour le pied de page bâton - ce qui est déjà vieux, mais fonctionne toujours un charme ... the man in blue - footerStickAlt

Similar question here.

Et je suis sûr que si vous utilisez le même critères dans cette question et la question liée à ce que pour lancer une recherche, vous trouverez plus.

Answer 2

essayer FlexBox, fonctionne avec Firefox et WebKit

http://www.html5rocks.com/en/tutorials/flexbox/quick/

la mise en œuvre actuelle n'est pas mis à jour, mais il est assez bon

mais vous pouvez probablement le faire avec des tables (qui sont similaires à le FlexBox)

this helps

Answer 3

div { border : 1px solid #d3d3e3 } 

#north { margin:0; padding:1em; }   
#south { margin:0; padding:1em; }   
#east  { margin:0; padding:1em; width:6em; height:22em; float:left; margin-right:1.1em }   
#west  { margin:0; padding:1em; width:6em; height:22em; float:right; margin-left:1.1em }   
#center { margin:0; padding:1em; padding-bottom:0em; }   
#center:after { content:' '; clear:both; display:block; height:0; overflow:hidden } 

<div id="north">North</div > 
<div id="east">East</div> 
<div id="west">West</div> 
<div id="center">Center</div> 
<div id="south">South</div> 

Lien direct: http://jsfiddle.net/marrok/dGw6K/2/

Answer 4

La disposition de la table CSS peut gérer cela très bien.

.borderLayout { 
    display: table; 
    width: 100% 
} 

.borderLayout .top { 
    display: table-row; 
} 

.borderLayout .left { 
    display: table-cell; 
    vertical-align: middle; 
    width: 10%; 
    } 

.borderLayout .center { 
    display: table-cell; 
    vertical-align: middle; 
} 

.borderLayout .right { 
    display: table-cell; 
    vertical-align: middle; 
    width: 10%; 
    } 

.borderLayout .bottom { 
    display: table-row; 
} 

JSFiddle