CSS HTML – Hauteur DIV remplir l’espace restant

J’ai donc une disposition comme celle-ci:

div { border: 1px solid } 
 
1
2
<div id="col_3" style="float:left;width:;">3

col_1 et col_2 occupent un espace fixe. Je veux que la troisième colonne en prenne le rest. Quelle est la meilleure façon de faire cela?

Vous pouvez faire quelque chose de fou, abandonner le javascript et les contenus CSS3 pas tout à fait prêts pour des heures de grande écoute et utiliser le positionnement absolu.

Voir ce jsfiddle . Des points bonus pour bien se comporter lors du redimensionnement du navigateur.

 #col_1 { position: absolute; top: 0px; bottom: 0px; width: 100px; background-color: #eee; } #col_2 { position: absolute; top: 0px; bottom: 0px; width: 150px; left: 100px; background-color: #ccd; } #col_3 { position: absolute; top: 0px; bottom: 0px; left: 250px; right: 0px; background-color: #cdc; } 
 
Column 1
Column 2
Column 3

Javascript est nécessaire pour cela. Si vous voulez que les 3 divs remplissent l’espace de la fenêtre (100%), vous devez utiliser javascript pour détecter la quantité d’espace disponible et atsortingbuer la hauteur de col_3 en conséquence. Avec jQuery, vous pouvez faire

 var one = $('#col_1').height(), two = $('#col_2').height(), remaining_height = parseInt($(window).height() - one - two); $('#col_3').height(remaining_height); 

Vous avez déjà accepté une réponse, mais vous pouvez consulter CSS Flexbox, conçu pour résoudre ce problème précis sans recourir aux piratages “float: left”. Cela fonctionne sur Chrome, Safari et FF (avec les préfixes -webkit et -moz). Pas encore sur IE.

Voici quelques liens rapides:

http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm

http://www.w3.org/TR/css3-flexbox/

Vous avez besoin d’un contexte de formatage de bloc:

 #c1,#c2 { background-color: red; float: left; width: 200px; } #c2 { background-color: green; } #c3 { background-color: yellow; height: 40px; overflow: auto; } 

c’est le débordement qui le fait fonctionner. Plus d’infos: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Voici quelque chose que j’ai pensé à utiliser certains CSS uniquement. Je l’ai testé en FF12, GC18, SAF5.1 et IE 7,8,9,9CV.

 .Clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .Clearfix { display: inline-block; } html[xmlns] .Clearfix { display: block; } * html .Clearfix { height: 1%; } #Wrapper { background-color: #FC20C9; } #col_1 { float: left; width: 150px; background-color: #FF0000; } #col_2 { float: left; width: 100px; background-color: #00CC00; } #col_3 { width: auto; float: none; background-color: #0066FF; overflow: hidden; } 
 
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
enter code here

Soit jQuery pour calculer l’espace restant, soit utilisez la boîte flexible css3 pour remplir l’espace restant:

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

diagram2 est le cas que vous voulez – la dernière boîte avec un maximum de ‘box-flex’ occupera l’espace restant (box-flex par défaut est 0)

Si vous ciblez les navigateurs les plus récents, vous pouvez utiliser la fonction HTML5 calc

 #col_3 { width: calc(100%-(100px+150px)); } #red { border: 1px solid goldenrod; } div { border: 1px solid; } 
 
1
2
3

enlever la largeur, et il devrait se développer pour tout remplir. mettre la largeur: 100% si vous le souhaitez. Vous devriez vérifier le plugin Firebug pour Firefox.

Mettez les trois div dans un conteneur, donnez les largeurs fixes aux colonnes 1 et 2 et réglez la 3ème sur auto.