Fai un div riempire la larghezza rimanente

88

Come posso fare in modo che un div riempia la larghezza rimanente?

<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>

Come posso div2riempire il resto?

html  css 
— raklos
fonte
Per una risposta corretta aggiornata, modificare la risposta migliore selezionata alla risposta di Adrien Be.
— edwardtyl
Avevo bisogno del contrario, un div centrale a larghezza fissa e un div esterno fluido. Ho aggiunto una risposta in fondo se qualcun altro ne ha bisogno.
— damndaewoo

Risposte:

63

Prova qualcosa di simile:

<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>

i div occuperanno naturalmente il 100% della larghezza del loro contenitore, non è necessario impostare esplicitamente questa larghezza. Aggiungendo un margine sinistro / destro uguale ai due div laterali, i suoi contenuti sono costretti a stare tra di loro.

Nota che il "div centrale" va dopo il "div destro" nell'HTML

— Leigh
fonte
1
Penso di aver trovato una soluzione ancora migliore basata sulla tua (ottima) soluzione :) vedi sotto nella risposta che fornisco
— Adrien Be
c'è un modo per farlo senza cambiare l'ordine degli articoli? cioè div sinistro, div medio, div destro. Questo è importante se vuoi fare cose diverse su schermi di dimensioni diverse.
— Eliezer Steinbock
Sì, questo ordine di sinistra-destra-metà è davvero il trucco. Non consente al div giusto di non andare sotto i due div, giusto?
— Ansjovis86
50

Soluzione aggiornata (ottobre 2014): pronta per layout fluidi

Introduzione:

Questa soluzione è ancora più semplice di quella fornita da Leigh. In realtà è basato su di esso.

Qui puoi notare che l'elemento centrale (nel nostro caso, con "content__middle"classe) non ha alcuna proprietà dimensionale specificata - nessuna larghezza, né padding, né proprietà relativa al margine - ma solo una overflow: auto;(vedi nota 1).

Il grande vantaggio è che ora puoi specificare a max-widthe a min-widthper i tuoi elementi sinistro e destro . Il che è fantastico per i layout fluidi .. quindi layout reattivo :-)

nota 1: rispetto alla risposta di Leigh in cui è necessario aggiungere le proprietà margin-left& margin-rightalla "content__middle"classe.

Codice con layout non fluido:

Qui gli elementi sinistro e destro (con classi "content__left"e "content__right") hanno una larghezza fissa (in pixel): quindi chiamato layout non fluido.

Demo dal vivo su 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>

Codice con layout fluido:

Qui gli elementi sinistro e destro (con classi "content__left"e "content__right") hanno una larghezza variabile (in percentuale) ma anche una larghezza minima e massima: da qui chiamata layout fluido.

Demo dal vivo in un layout fluido con le max-widthproprietà 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>

Supporto browser

Testato su BrowserStack.com sui seguenti browser web:

  • Da IE7 a 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
— Adrien Be
fonte
2
Consiglierei a tutti gli sviluppatori di utilizzare questo metodo, soprattutto perché il Responsive Web Design è diventato una necessità. :)
— aullah
1
Attento a questo. In alcuni casi la barra di scorrimento apparirà nel div content__middle su Firefox se le altezze non sono accurate a causa di overflow: auto;
— Jason,
Ciao Jason, è molto interessante, grazie per averlo fatto notare. Puoi fornire un jsfiddle per mostrare un esempio dal vivo quando ciò accade?
— Adrien Be
è questo perché overflowcrea un contesto di formattazione del blocco? avrebbe display: flexlo stesso effetto?
— Jayen
1
Sì, lo ha fatto. developer.mozilla.org/en-US/docs/Web/Guide/CSS/… è stato molto utile. overflow-y: hiddenho finito per usarlo in quanto a) consentiva di impostare la larghezza, b) ha il miglior supporto per il browser ec) non era una tabella
— Jayen
39

Le scatole flessibili sono la soluzione e sono fantastiche. Ho desiderato qualcosa di simile da CSS per un decennio. Tutto ciò di cui hai bisogno è aggiungere display: flexal tuo stile "Principale" e flex-grow: 100(dove 100 è arbitrario - non è importante che sia esattamente 100). Prova ad aggiungere questo stile (colori aggiunti per rendere visibile l'effetto):

<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>

Maggiori informazioni sulle scatole flessibili qui: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

— BT
fonte
Flexbox è fantastico, ma occupa solo lo spazio necessario invece di tutto lo spazio che rimane. Così sono andato con l'overflow: soluzione automatica.
— ThinkBonobo
@ThinkBonobo cosa intendi con "esso"? Una scatola flessibile stessa agirà come un "blocco" e gli oggetti all'interno di una scatola flessibile possono sicuramente occupare più spazio di quanto ne richieda.
— BT
@BT significa il div centrale principale. È sicuramente una soluzione che funziona per molti casi ma non per il mio caso d'uso particolare.
— Think Bonobo
1
@ThinkBonobo Scommetto che potrei farlo funzionare per te se pubblichi un jsFiddle
— BT
24

Usa la proprietà CSS Flexbox flex-grow per ottenere ciò.

.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>
Espandi lo snippet

— Reggie Pinkham
fonte
1
Migliore risposta tbh. Funziona 4 anni dopo e più pulito rispetto ad altre soluzioni. +1
— Harry J
4

Anche se in bitritardo nella pubblicazione di una risposta, ecco un approccio alternativo senza utilizzare i margini.

<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>

Questo metodo funziona come per magia, ma ecco una spiegazione:) \

Giocherellare con un campione simile qui.

— Sunny R Gupta
fonte
4

Il Div che deve occupare lo spazio rimanente deve essere una classe .. Gli altri div possono essere id (s) ma devono avere larghezza ..

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>

Il seguente collegamento ha il codice in azione, che dovrebbe risolvere il problema di copertura dell'area rimanente.

jsFiddle

— Avishek Bose
fonte
1

Stavo cercando una soluzione al problema opposto in cui avevo bisogno di un div di larghezza fissa al centro e un div di larghezza fluido su entrambi i lati, quindi ho pensato di postarlo qui nel caso qualcuno ne avesse bisogno.

#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>
Espandi lo snippet

Se modifichi la larghezza #centerdell'elemento, devi aggiornare la proprietà width di .fluida:

width: calc(50% - [half of center width]px);
— damndaewoo
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.