Faire un div remplir la largeur restante

87

Comment puis-je faire en sorte qu'un div remplisse la largeur restante?

<div id="Main" style="width: 500px;">
    <div id="div1" style="width: 100px;"></div>
    <div id="div2"></div>
    <div id="div3" style="width: 100px; float: right;"></div>
</div>

Comment puis-je div2remplir le reste?

html  css 
— raklos
source
Pour une réponse correcte à jour, veuillez changer la meilleure réponse sélectionnée en réponse d'Adrien Be.
— edwardtyl
J'avais besoin de l'opposé, d'un div central à largeur fixe et de divs extérieurs fluides. J'ai ajouté une réponse en bas si quelqu'un d'autre en a besoin.
— damndaewoo

Réponses:

63

Essayez quelque chose comme ceci:

<style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; background-color: #fcc; }
    #middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
    #right-div { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="left-div">
        left div
    </div>
    <div id="right-div">
        right div
    </div>
    <div id="middle-div">
        middle div<br />bit taller
    </div>
</div>

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 à celle des deux divs latéraux, son propre contenu est obligé de s'asseoir entre eux.

Notez que le "div du milieu" suit le "div de droite" dans le HTML

— Leigh
source
1
Je pense avoir trouvé une solution encore meilleure basée sur votre (excellente) solution :) voir ci-dessous dans la réponse que je donne
— Adrien Be
y a-t-il un moyen de le faire sans changer l'ordre des articles? c'est-à-dire div-gauche, div-milieu, div-droite. Ceci est important si vous voulez faire différentes choses sur différentes tailles d'écran.
— Eliezer Steinbock
Ouais cet ordre de gauche-droite-milieu est vraiment le truc. Il interdit au bon div de ne pas passer sous les deux divs, non?
— Ansjovis86
49

Solution à jour (octobre 2014): prête pour les mises en page fluides

Introduction:

Cette solution est encore plus simple que celle proposée par Leigh. C'est en fait basé sur cela.

Ici , vous pouvez remarquer que l'élément central (dans notre cas, avec la "content__middle"classe) ne pas avoir une propriété de dimension spécifiée - sans largeur, ni rembourrage, ni marge propriété liée du tout - mais seulement un overflow: auto;(voir la note 1).

Le grand avantage est que maintenant vous pouvez spécifier a max-widthet a min-widthà vos éléments gauche et droit . Ce qui est fantastique pour les mises en page fluides ... d'où une mise en page réactive :-)

note 1: par rapport à la réponse de Leigh où vous devez ajouter les propriétés margin-left& margin-rightà la "content__middle"classe.

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

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content {
        width: 100%;
    }
    .content__left {
        width: 100px;
        float: left; /* [1] */
        background-color: #fcc;
    }
    .content__middle {
        background-color: #cfc;
        overflow: auto; /* [2] */
    }
    .content__right {
        width: 100px;
        float: right; /* [3] */
        background-color: #ccf;
    }
</style>

<div class="content">
    <div class="content__left">
        left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

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 mise en page fluide.

Démo en direct dans une mise en page fluide avec les max-widthpropriétés http://jsbin.com/runahoremuwu/1/edit?html,css,output

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content { 
        width: 100%; 
    }
    .content__left { 
        width: 20%; 
        max-width: 170px;  
        min-width: 40px;  
        float: left; /* [1] */
        background-color: #fcc; 
     }
    .content__middle { 
        background-color: #cfc; 
        overflow: auto; /* [2] */
    }
    .content__right { 
        width: 20%; 
        max-width: 250px; 
        min-width: 80px; 
        float: right; /* [3] */
        background-color: #ccf; 
    }
</style>

<div class="content">
    <div class="content__left">
        max-width of 170px & min-width of 40px<br />left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        max-width of 250px & min-width of 80px<br />right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

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,
  • Opéra 20
— Adrien Be
source
2
Je recommanderais à tous les développeurs d'utiliser cette méthode, d'autant plus que le Responsive Web Design est devenu une nécessité. :)
— aullah
1
Attention à celui-ci. Dans certains cas, la barre de défilement apparaîtra dans le div content__middle sur Firefox si les hauteurs ne sont pas précises en raison d'un débordement: auto;
— Jason
Salut Jason, c'est très intéressant, merci de le signaler. Pouvez-vous fournir un jsfiddle pour montrer un exemple en direct lorsque cela se produit?
— Adrien Be le
est-ce parce que overflowcrée un contexte de formatage de bloc? aurait display: flexle même effet?
— Jayen
1
Oui, c'est vrai. developer.mozilla.org/en-US/docs/Web/Guide/CSS/ ... a été très utile. a fini par utiliser overflow-y: hiddencomme a) la largeur autorisée à définir, b) a le meilleur support de navigateur et c) n'était pas une table
— Jayen
39

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

<style>
    #Main {
        background-color: lightgray;
        display: flex;
    }

    #div1 {
        border: 1px solid green;   
        height: 50px; 
        display: inline-flex; 
    }
    #div2 {
        border: 1px solid blue;    
        height: 50px;
        display: inline-flex;
        flex-grow: 100;
    }
    #div3 {
        border: 1px solid orange;        
        height: 50px;
        display: inline-flex;
    }
</style>

Plus d'informations sur les boîtes flexibles ici: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

— BT
source
Flexbox est génial, mais il ne prend que l'espace dont il a besoin au lieu de tout l'espace qui reste. Ainsi je suis allé avec le débordement: solution automatique.
— ThinkBonobo
@ThinkBonobo qu'entendez-vous par "ça"? Une boîte flexible elle-même agira comme un «bloc», et les éléments à l'intérieur d'une boîte flexible peuvent certainement prendre plus d'espace qu'il n'en faut.
— BT
@BT cela signifie la principale div centrale. C'est certainement une solution qui fonctionne dans de nombreux cas, mais pas pour mon cas d'utilisation particulier.
— ThinkBonobo
1
@ThinkBonobo Pariez que je pourrais le faire fonctionner pour vous si vous postiez un jsFiddle
— BT
23

Utilisez la propriété CSS Flexbox flex-grow pour y parvenir.

.main {
  display: flex;
}
.col-1, .col-3 {
  width: 100px;
}
.col-2 {
  flex-grow: 1;
}
<div class="main">
  <div class="col-1" style="background: #fc9;">Left column</div>
  <div class="col-2" style="background: #eee;">Middle column</div>
  <div class="col-3" style="background: #fc9;">Right column</div>
</div>
Développer l'extrait

— Reggie Pinkham
source
1
Meilleure réponse tbh. Fonctionne 4 ans plus tard et plus propre que les autres solutions. +1
— Harry J
4

Bien que bittard dans la publication d'une réponse, voici une approche alternative sans utiliser de marges.

<style>
    #divMain { width: 500px; }
    #div1 { width: 100px; float: left; background-color: #fcc; }
    #div2 { overflow:hidden; background-color: #cfc; }
    #div3 { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="div1">
        div 1
    </div>
    <div id="div3">
        div 3
    </div>
    <div id="div2">
        div 2<br />bit taller
    </div>
</div>

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

Jouez avec un échantillon similaire ici.

— Sunny R Gupta
source
4

La Div qui doit prendre l'espace restant doit être une classe. Les autres div peuvent être des id (s) mais elles 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 :

<body>
    <div id="main_center">
        <div id="left"></div>
        <div class="right"></div>
        <div class="clear"></div>
    </div>
</body>

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

jsFiddle

— Avishek Bose
source
1

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 fluide de chaque côté, alors j'ai proposé ce qui suit et j'ai pensé le poster ici au cas où quelqu'un en aurait besoin.

#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);
}
<div id="wrapper">
  <div id="center">
    This is fixed width in the centre
  </div>
  <div id="left" class="fluid">
    This is fluid width on the left
  </div>
  <div id="right" class="fluid">
    This is fluid width on the right
  </div>
</div>
Développer l'extrait

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

width: calc(50% - [half of center width]px);
— damndaewoo
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.