3 div w pojemniku stałym rozmiarze: 2 mają stałe wielkości, 1 należy rozciągnąć

Question

Załóżmy, że mają określony rozmiar div, który zawiera trzy dalsze divs:

• Pierwszy i ostatni mają określony rozmiar, a także , środkowy powinien wypełnić resztę przestrzeni

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

Jak mogę ustawić, aby element div #b automatycznie się rozciągał.

Trzy div (#a, #b, #c) powinna wypełnić całą height z #container.

Answer 1

Można użyć Flexbox i flex-direction: column, więc jeśli ustawisz flex: 1 na #b, zajmie resztę wolnego miejsca.

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

Aktualizacja: Myślę, że można zrobić to samo z tabel css Fiddle

Answer 2

użycie 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>

Jeśli chcesz wesprzeć IE8, można użyć 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

schematu flexbox zostało dokonane na dokładnym tego problemu. to magia! Uwaga: Dodaj zestaw internetowy, aby uzyskać lepszą pomoc techniczną.

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

Co jeśli pozycja make bezwzględna dla a i c i dodać dopełnienie do container równej a i c wysokości, i uczynić b 100% wysokości?

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