Mise en page sans Tableaux avec deux colonnes de liquide (liquide - fixe - liquide)

Question

Donc, cette application Web que je travaille a trois colonnes verticales en expansion pour toute la hauteur de la fenêtre, et un pied div expansion sur toute la largeur. La mise en page ressemble à ceci:

+|+ 
--- 

où + signifie une colonne de liquide, | signifie une colonne fixe et - le pied de page.

J'ai effectué le positionnement des éléments en utilisant le positionnement absolu et relatif avec quelques réglages en utilisant jQuery. Mais je veux savoir s'il y a un moyen de le faire avec CSS3 seulement.

Merci!

Answer 1

Ceci néglige tout navigateur ne supportant pas les propriétés box-orient et box-flex (comme IE).

Demo: http://jsfiddle.net/p8vBC/11/

CSS:

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

body > #main { 
    display: -webkit-box; 
    -webkit-box-orient: horizontal; 

    display: -moz-box; 
    -moz-box-orient: horizontal; 

    display: box; 
    box-orient: horizontal; 

    height: 100%; 
    margin-bottom: -100px; 
} 

footer { 
    height: 100px; 
    box-flex: 1; 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
} 

aside { 
    box-flex: 1; 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
} 

#content { 
    width: 400px; 
} 

HTML:

<div id="main"> 
    <aside id="left"></aside> 
    <div id="content"></div> 
    <aside id="right"></aside> 
</div> 

<footer></footer>