Faire un div remplir la largeur restante

Comment puis-je faire un div remplir la largeur restante?

par exemple

Comment puis-je obtenir div2 pour remplir le rest?

Essayez quelque chose comme ceci:

  
left div
right div
middle div
bit taller

Les divs occuperont naturellement 100% de la largeur de leur conteneur, il n’est pas nécessaire de définir explicitement cette largeur. En ajoutant une marge gauche / droite identique aux deux divs latéraux, son propre contenu est forcé de s’asseoir entre eux.

Notez que la “div du milieu” va après le “div droit” dans le HTML

Solution mise à jour (octobre 2014): prête pour des configurations fluides


Introduction:

Cette solution est encore plus simple que celle fournie par Leigh . C’est en fait basé sur cela.

Ici, vous pouvez remarquer que l’élément intermédiaire (dans notre cas, avec la classe "content__middle" ) n’a pas de propriété dimensionnelle spécifiée – pas de largeur, ni de remplissage, ni de propriété liée à la marge – mais seulement un overflow: auto; (voir note 1).

Le grand avantage est que maintenant vous pouvez spécifier une max-width et une min-width à vos éléments gauche et droit . Ce qui est fantastique pour les dispositions fluides .. donc mise en page sensible 🙂

note 1: contre la réponse de Leigh où vous devez append les propriétés margin-left et margin-right à la classe "content__middle" .


Code avec mise en page non fluide:

Ici, les éléments gauche et droit (avec les classes "content__left" et "content__right" ) ont une largeur fixe (en pixels): donc appelée mise en page non fluide.

Démo en direct sur http://jsbin.com/qukocefudusu/1/edit?html,css,output

  
left div
left div
left div
left div
left div
left div
right div
right div
right div
right div
middle div
middle div
middle div
middle div
middle div
middle div
middle div
middle div
middle div
bit taller

Code avec mise en page fluide:

Ici, les éléments gauche et droit (avec les classes "content__left" et "content__right" ) ont une largeur variable (en pourcentages) mais aussi une largeur minimale et maximale: donc appelée layout fluide.

Live Demo dans une mise en page fluide avec les propriétés max-width http://jsbin.com/runahoremuwu/1/edit?html,css,output

  
max-width of 170px & min-width of 40px
left div
left div
left div
left div
left div
left div
max-width of 250px & min-width of 80px
right div
right div
right div
right div
middle div
middle div
middle div
middle div
middle div
middle div
middle div
middle div
middle div
bit taller

Prise en charge du navigateur

Testé sur BrowserStack.com sur les navigateurs Web suivants:

  • IE7 à IE11
  • Ff 20, Ff 28
  • Safari 4.0 (Windows XP), Safari 5.1 (Windows XP)
  • Chrome 20, Chrome 25, Chrome 30, Chrome 33,
  • Opera 20

Les boîtes flexibles sont la solution – et elles sont fantastiques. Je veux quelque chose comme ça depuis une décennie. Tout ce dont vous avez besoin est d’append de l’ display: flex à votre style pour “Main” et flex-grow: 100 (où 100 est arbitraire – ce n’est pas important qu’il soit exactement 100). Essayez d’append ce style (couleurs ajoutées pour rendre l’effet visible):

  

Plus d’infos sur les boîtes flex ici: https://css-sortingcks.com/snippets/css/a-guide-to-flexbox/

Solution Flexbox

 .main { display: flex; } .col-1, .col-3 { width: 100px; } .col-2 { flex-grow: 1; } 
 
Left column
Middle column
Right column

Bien qu’un bit tard dans la publication d’une réponse, voici une approche alternative sans utiliser de marge.

  
div 1
div 3
div 2
bit taller

Cette méthode fonctionne comme la magie, mais voici une explication:) \

Violon avec un échantillon similaire ici.

La Div qui doit prendre l’espace restant doit être une classe. Les autres divs peuvent être des identifiants mais ils doivent avoir une largeur.

CSS :

 #main_center { width:1000px; height:100px; padding:0px 0px; margin:0px auto; display:block; } #left { width:200px; height:100px; padding:0px 0px; margin:0px auto; background:#c6f5c6; float:left; } .right { height:100px; padding:0px 0px; margin:0px auto; overflow:hidden; background:#000fff; } .clear { clear:both; } 

HTML :

  

Le code suivant a le code en action, ce qui devrait résoudre le problème de couverture de zone restant.

jsfiddle

Je cherchais une solution au problème opposé où j’avais besoin d’un div de largeur fixe au centre et d’un div de largeur de fluide de chaque côté.

HTML:

 
This is fixed width in the centre
This is fluid width on the left

CSS:

 #wrapper { clear: both; width: 100%; } #wrapper div { display: inline-block; height: 500px; } #center { background-color: green; margin: 0 auto; overflow: auto; width: 500px; } #left { float: left; } #right { float: right; } .fluid { background-color: yellow; width: calc(50% - 250px); } 

Si vous modifiez la largeur de l’élément #center , vous devez mettre à jour la propriété width de .fluid pour:

 width: calc(50% - [half of center width]px);