Il div intermedio di 3 div occupa la larghezza rimanente

Question

Ok ragazzi, mi sono rotto le palle per questo.

Ho tre div; a sinistra, a metà, a destra. Tutto il 100% di altezza. I div di sinistra e di destra hanno una larghezza fissa di 150 px. Ora voglio che il middle div occupi lo spazio rimanente.

Esempio: Here

CSS:

#left { 
    height:100%; 
    width:150px; 
    float:left; 
    background:red; 
    z-index:999; 
} 
#middle { 
    height:100%; 
    width:100%; 
    background:yellow; 
    margin-left:-150px; 
    margin-right:-150px; 
} 
#right { 
    float:right; 
    height:100%; 
    width:150px; 
    background:red; 
    z-index:998; 
} 

Answer 1

Uso display: table:

#container { 
    display: table; 
    width: 100%; 
} 

#left, #middle, #right { 
    display: table-cell; 
} 

#left, #right { 
    width: 150px; 
} 

Qualora il #container è il vostro elemento principale come in

<div id="container"> 
    <div id="left"></div> 
    <div id="middle"></div> 
    <div id="right"></div> 
</div> 

Questo è un Fiddle.

Answer 2

Scegli questa similar answer

HTML

<div class = "container"> 
    <div class = "fixed"> 
     I'm 150px wide! Glee is awesome! 
    </div> 
    <div class = "fluid"> 
     I'm fluid! Glee is awesome! 
    </div> 
    <div class = "fixed">   
     I'm 150px wide! Glee is awesome! 
    </div> 
</div> 

CSS

html, body { 
    height: 100%; 
    font-family: 'Arial', 'Helvetica', Sans-Serif; 
} 
.container { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 
.container > div { 
    display: table-cell; 
    text-align: center; 
} 
.fixed { 
    width: 150px; 
    background: rgb(34, 177, 77); 
    color: white; 
} 
.fluid { 
    background: rgb(0, 162, 232); 
} 

DEMO

Answer 3

Se non si desidera utilizzare celle di tabella e non si desidera assegnare alle caselle esterne una larghezza fissa (anziché determinare la larghezza in base al loro contenuto, è possibile utilizzare il metodo overflow-hidden e float)

La cosa brutta di questo metodo è che si devono aderire ad aver troppo pieno nascosto sul vostro div e inoltre si deve organizzare i vostri div in un modo indietro (vedi sotto)

DEMO

HTML

<div class='container'> 

    <div class='third-box'>Third</div> 

    <div class='first-second'> 
     <div class='first-box'>First</div> 
     <div class='second-box'>Second</div> 
    </div> 

</div> 

CSS

.container { 
    width: 400px; 
} 

.first-second { 
    overflow: hidden; 
} 

.first-box { 
    float: left; 
    background-color: coral; 
} 

.second-box { 
    overflow: hidden; 
    background-color: aquamarine; 
} 

.third-box { 
    float: right; 
    background-color: salmon; 
} 

Answer 4

D'accordo con flex e basato this answer

#parent { 
 
    display: flex; 
 
} 
 
#left { 
 
    width:150px; 
 
    background-color:#ff0000; 
 
} 
 
#middle { 
 
    flex: 1 1 auto; 
 
    background-color:#00ff00; 
 
} 
 
#right { 
 
    width: 150px; 
 
    background-color:#0000ff; 
 
}

<div id="parent"> 
 
    <div id="left">left</div> 
 
    <div id="middle">middle</div> 
 
    <div id="right">right</div> 
 
</div>

Questo funziona in realtà se il div sinistro e destro ha anche larghezza variabile.