CSS Column Divs Aide requise

Question

J'essaye de construire une mise en page, où la colonne de gauche a une largeur fixe et une hauteur de 100% (quelle que soit la colonne de droite) et la colonne de droite a une largeur de fluide. J'ai essayé différentes façons de le faire, mais ne peut pas sembler obtenir droit ..

Voici mon code:

<div id="pageHolder"> 
    <div id="topSection"> 
    header goes here 
    </div> 
    <div id="pageContainer"> 
    <div id="leftColumn"> 
     <div id="leftHolder"> 
     left stuff goes here 
     </div> 
    </div> 
    <div id="rightColumn"> 
     <div id="rightHolder"> 
     right stuff goes here 
     </div> 
    </div> 
    </div> 
    <div id="bottomSection"> 
    footer goes here 
    </div> 
</div> 

Et mon css:

body { 
    height: 100%; 
} 
div#pageHolder { 

} 
div#topSection { 
    padding: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 0px; 
} 
div#pageContainer { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    padding: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 0px; 
} 
div#leftColumn { 
    position: relative; 
    float: left; 
    width: 285px; 
    height: 100%; 
    padding: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 0px; 
} 
div#leftHolder { 
    padding: 25px 25px 25px 25px; 
    margin: 0px 0px 0px 0px; 
} 
div#rightColumn { 
    position: relative; 
    height: 100%; 
    min-height: 100%; 
    padding: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 285px; 
} 
div#rightHolder { 
    padding: 25px 25px 25px 25px; 
    margin: 0px 0px 0px 0px; 
} 
div#bottomSection { 
    clear: both; 
} 

Si quelqu'un pourrait me aider, ce serait fantastique :)

Answer 1

Essayez ceci:

div#leftColumn { 
    position: absolute; 
    float: left; 
    width: 285px; 
    height: 100%; 
    padding: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 0px; 
} 

** Edit: En y repensant peut-être en utilisant maxwidth et maxheight pourrait faire quelque chose pour vous aider si vous voulez garder la position: relative.

Answer 2

Je crois que vous voulez remplacer votre body définition par body, html dans votre CSS, ainsi que d'ajouter une hauteur à pageHolder

body, html { 
    height: 100%; 
} 
div#pageHolder { 
    height: 100%; 
} 

Il est assez ennuyeux mais parce que vous obtiendrez des barres de défilement inutiles quel que soit le contenu à l'intérieur. Est-ce ce que vous essayez d'accomplir?

Answer 3

http://css-tricks.com/the-perfect-fluid-width-layout/

que je vois le « live example » c'est ce que vous demandez