faire un div remplir la largeur restante

Question

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

par exemple:

 divMain has width 500px and contains these divs below

  div1 has width 100px;

  div2 

  div3 has width 100px float right
 

Comment puis-je obtenir div2 pour remplir le reste?

Answer 1

Essayez quelque chose comme ça:

 <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 prendront 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 divs des deux côtés, son propre contenu est forcé de s'asseoir entre eux.

Notez que le "middle div" va après le "right div" dans le code HTML

Answer 2

La mise à jour de la solution (octobre 2014) : prêt pour les dispositions fluides

Introduction:

Cette solution est encore plus simple que celui fourni par Leigh. Il est en fait basé sur elle.

Ici vous pouvez remarquer que le milieu de l'élément (dans notre cas, avec "content__middle" de la classe) ne pas avoir toutes les dimensions de la propriété spécifiée - ni largeur, ni rembourrage, ni de marge de propriété liés à tous - mais seulement un overflow: auto; (voir la note 1).

Le grand avantage est que maintenant vous pouvez spécifier un max-width et min-width à votre gauche et à droite des éléments. Ce qui est fantastique pour les dispositions fluides.. donc sensible mise en page :-)

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

---

Code non-liquide de mise en page:

Ici, la gauche et la droite des éléments (avec des classes "content__left" et "content__right") ont une largeur fixe (en pixels): d'où qu'on appelle les non-liquide de mise en page.

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

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

Ici, la gauche et la droite des éléments (avec des classes "content__left" et "content__right") ont une largeur variable (en pourcentages), mais aussi un minimum et maximum largeur: ainsi appelé fluide de mise en page.

Démonstration en direct dans un design fluide avec l' max-width propriétés http://jsbin.com/runahoremuwu/1/edit?html,css,sortie

<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, 28 Ff
• Safari 4.0 (windows XP), Safari 5.1 (windows XP)
• Chrome 20, Chrome 25, Chrome 30, Chrome 33,
• L'opéra de 20

Answer 3

Bien qu'un bit tarde à poster 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:) \

Violon avec un échantillon similaire ici.

Answer 4

La Div qui doit prendre le reste de l'espace doit être une classe.. Les autres divs peut être id(s), mais ils doivent avoir la 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 est le code de l'action, ce qui devrait résoudre le restant de la zone de couverture de la question.

jsFiddle

Answer 5

Si je comprends bien, le problème est le même que celui énoncé ici: CSS définit la largeur pour remplir le% de la surface restante.

vous voudrez peut-être jeter un coup d’œil ici http://www.alistapart.com/articles/holygrail