3 divs trong container kích thước cố định: kích thước 2 đã cố định, 1 nên căng

Question

Nói rằng tôi có một kích thước cố định div, trong đó có 3 thêm divs:

• Việc đầu tiên và người cuối cùng có một kích thước cố định cũng , một trong những trung nên điền vào phần còn lại của không gian

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

Làm thế nào tôi có thể làm cho div #b tự động giãn ra.

Ba divs (#a, #b, #c) nên lấp đầy toàn bộ height của #container.

Answer 1

Bạn có thể sử dụng Flexbox và flex-direction: column, vì vậy nếu bạn đặt flex: 1 trên #b, nó sẽ chiếm phần còn lại của dung lượng trống.

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

Cập nhật: Tôi đoán bạn có thể làm điều tương tự với các bảng css Fiddle

Answer 2

sử dụng 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>

Nếu bạn muốn hỗ trợ IE8, bạn có thể sử dụng 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 đã được thực hiện cho vấn đề này chính xác. đó là phép thuật! Lưu ý: Bao gồm webkit để được hỗ trợ tốt hơn.

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

gì nếu làm vị trí tuyệt đối cho a và c, và thêm padding để container bằng a và c chiều cao, và làm cho chiều cao 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>