如何設置幾個嵌套div的相對位置？

Question

假設我有一些div，如：

<div id="div0"> 
    <div id="div1"></div> 
    <div id="div2"></div> 
    <div id="div3"></div> 
</div> 

DIV0，DIV1和DIV3有固定的高度。現在我想讓div2自動展開，以便佔用所有剩餘的空間。有沒有辦法做到這一點？ 以這個http://codepen.io/anon/pen/XJorMb爲例，我想讓藍色方塊坐在中間，佔據所有剩餘的空間。

Answer 1

你可以用flex做到這一點：

#fixedPanel { 
 
    position:fixed; 
 
    width: 350px; 
 
    height:150px; 
 
    border-style: solid; 
 
    border-width: 5px; 
 
    display:flex; 
 
    flex-direction:column; 
 
} 
 
#div1 { 
 
    height: 20px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: red; 
 
} 
 
#div2 { 
 
    flex:1; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: blue; 
 
} 
 
#div3 { 
 
    height: 20px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: green; 
 
}

<div id="fixedPanel"> 
 
    <div id="div1"> 1 </div> 
 
    <div id="div2"> 2 </div> 
 
    <div id="div3"> 3 </div> 
 
</div>

或display:table;

#fixedPanel { 
 
    position:fixed; 
 
    width: 350px; 
 
    height:150px; 
 
    border-style: solid; 
 
    border-width: 5px; 
 
    display:table; 
 
    border-collapse:collapse; 
 
} 
 
#fixedPanel > div { 
 
display:table-row; 
 
} 
 
#div1 { 
 
    height: 20px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: red; 
 
} 
 
#div2 { 
 
    height:100%; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: blue; 
 
} 
 
#div3 { 
 
    height: 20px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: green; 
 
}

<div id="fixedPanel"> 
 
    <div id="div1"> 1 </div> 
 
    <div id="div2"> 2 </div> 
 
    <div id="div3"> 3 </div> 
 
</div>

Answer 2

是的，對於行使用table和table-cell。

http://jsfiddle.net/vrt2s232/1/

html, body { 
    margin: 0; 
    height: 100%; 
} 

#div0 { 
    display: table; 
    height: 100%; 
} 

#div0 > div { 
    display: table-row; 
} 

#div1, #div3 { 
    height: 100px; 
    background: blue; 
} 

#div2 { 
    background: red; 
} 
#div0 > div { 
    display: table-cell; 
} 

#div1, #div3 { 
    width: 100px; 
    background: blue; 
} 

#div2 { 
    background: red; 
} 

爲列：

http://jsfiddle.net/vrt2s232/