3 div nel contenitore di dimensione fissa: dimensione 2 sono fisse, 1 dovrebbe allungare

Question

che ho una dimensione fissa div, che contiene 3 ulteriormente divs:

• Il primo e l'ultimo ha una dimensione fissa, nonché , quello centrale deve riempire il resto dello spazio

#container { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
#a, 
 
#c { 
 
    height: 20px; 
 
} 
 
#b { 
 
    height: 60px; // this should be a generic value... 
 
}

<div id="container"> 
 
    <div id="a">A</div> 
 
    <div id="b">B</div> 
 
    <div id="c">C</div> 
 
</div>

Come posso fare in modo che il div #b si allunghi automaticamente.

I tre div (#a, #b, #c) dovrebbero riempire l'intero height di #container.

Answer 1

È possibile utilizzare Flexbox e flex-direction: column, quindi se si imposta flex: 1 su #b ci vorrà il resto dello spazio libero.

#container { 
 
    width: 100px; 
 
    height: 100px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: 1px solid black; 
 
} 
 
#a,#c { 
 
    height: 20px; 
 
    background: lightblue; 
 
} 
 
#b { 
 
    flex: 1; 
 
    background: lightgreen; 
 
}

<div id="container"> 
 
    <div id="a">A</div> 
 
    <div id="b">B</div> 
 
    <div id="c">C</div> 
 
</div>

Aggiornamento: Credo che si potrebbe fare stessa cosa con le tabelle CSS Fiddle

Answer 2

uso CSS3 calc()

body, 
 
html { 
 
    height: 100%; 
 
    margin: 0 
 
} 
 
#container { 
 
    width: 100px; 
 
    height: 100%; 
 
} 
 
#a, 
 
#c { 
 
    height: 20px; 
 
    background: red 
 
} 
 
#b { 
 
    height: calc(100% - 40px); 
 
    background: green 
 
}

<div id="container"> 
 
    <div id="a">A</div> 
 
    <div id="b">B</div> 
 
    <div id="c">C</div> 
 
</div>

Se vuoi sostenere IE8, è possibile utilizzare display:table/table-row

body { 
 
    margin: 0 
 
} 
 
#container { 
 
    width: 100px; 
 
    height: 100px; 
 
    display: table 
 
} 
 
#container > div { 
 
    display: table-row 
 
} 
 
#a, 
 
#c { 
 
    height: 20px; 
 
    background: red 
 
} 
 
#b { 
 
    background: green 
 
}

<div id="container"> 
 
    <div id="a">A</div> 
 
    <div id="b">B</div> 
 
    <div id="c">C</div> 
 
</div>

Answer 3

Flexbox è stato fatto per questo problema esatto. è magico! Nota: includere il webkit per un supporto migliore.

html,body{height:100%} 
 
#container { 
 
    width: 100px; 
 
    height: 100px; 
 
    display:-webkit-flex; 
 
    display:flex; 
 
    -webkit-flex-direction:column; 
 
    flex-direction:column; 
 
} 
 

 
#a, #c { 
 
    height: 20px; 
 
    background:#333; 
 
} 
 

 
#b { 
 
    height: 100%; // this should be a generic value... 
 
    background:#eee; 
 
}

<div id="container"> 
 
    <div id="a">A</div> 
 
    <div id="b">B</div> 
 
    <div id="c">C</div> 
 
</div>

Answer 4

Cosa se la posizione make assoluto per a e c, e aggiungere imbottitura per container pari a a e c altezza, e rendere l'altezza b 100%?

#container { 
 
    width: 100px; 
 
    height: 100px; 
 
    padding: 20px 0; 
 
    box-sizing: border-box; 
 
    position: relative; 
 
} 
 
#a, 
 
#c { 
 
    height: 20px; 
 
    width: 100%; 
 
    border: solid 1px red; 
 
    box-sizing: border-box; 
 
    position: absolute; 
 
    left: 0; 
 
} 
 
#b { 
 
    height: 100%; 
 
    border: solid 1px green; 
 
} 
 
    
 
#a {top: 0;} 
 
#c{bottom: 0;} 
 

<div id="container"> 
 
    <div id="a">A</div> 
 
    <div id="b">B</div> 
 
    <div id="c">C</div> 
 
</div>