3的div佔據父，第一和最後一個div高度可變的所有高度

Question

我一直在努力實現以下設計：

使用JavaScript，我輕易得手。我試圖實現相同的行爲，但沒有任何Javascript，只使用CSS，我失敗了。我想知道這是否可能。

我目前的實現是基於申報單，但也可能是任何其他HTML元素（表等）

<div id="parent"> 
    <div id="one"> 
    Some variable content 
    </div> 
    <div id="two"> 
    Should occupy the remaining height 
    </div> 
    <div id="three"> 
    Some variable content 
    </div> 
</div> 

這裏是一個JSFiddle實施的基礎。

感謝您的幫助。

Answer 1

乾杯！ 是的，你可以使用flex。它非常簡單明瞭，將容器設置爲顯示：flex，那麼您可以指定哪些容器子項必須增長，哪些還沒有增加flex-grow屬性。

#parent { 
    display: flex; 
    flex-direction: column; 
} 

#one, #three { 
flex-grow: 0; 
} 

#two { 
    flex-grow: 1; 
} 

請參閱更新的小提琴：https://jsfiddle.net/ypzd68wv/3/

PS：檢查最低瀏覽器支持的要求;）http://caniuse.com/#feat=flexbox