如何將overflow-y div擴展到垂直可用空間？

我有這樣一個佈局：如何將overflow-y div擴展到垂直可用空間？

<div id="container"> 
    <div id="A"></div> 
    <div id="B"></div> 
    <div id="C"></div> 
</div>

和這裏的（不完全）CSS：

#container { 
    height: 400px; 
    background: red;  
} 

#A { 
    height: 50px; 
    background: yellow; 
} 

#B { 
    height: 300px; 
    background: blue; 
    overflow-y: auto;  
} 

#C { 
    height: 50px; 
    background: yellow; 
}

所以AB和C應堆放在彼此的頂部，乙方應填寫A和C之間的剩餘空間，如果其內容太多，則顯示滾動條。
我的問題是，有時候C 可能會丟失，我該如何讓B動態擴展以佔用它的空間呢？

來源

2012-11-28 Joril

一個可行的方法是：

#B:last-child { 
    height: 350px; 
}

http://jsfiddle.net/thirtydot/7Bqkb/1/

所以，如果#B是最後一個孩子，手動設置高度，正確的值。

:last-child browser support.

來源

2012-11-28 22:01:11 thirtydot

如果缺乏IE7/8支持是一個問題，那麼即使在這些瀏覽器中，也可以重構這個想法。 – thirtydot

以及IE8的支持不會是壞的:) – Joril

我確定我有一個簡單的解決方案，但我不能爲我的生活記住它是什麼......這是一個不太優雅的修復涉及交換您的HTML順序略有：http://jsfiddle.net/thirtydot/7Bqkb/ – thirtydot

另一種方法是使用~選擇：

#B { 
    height: 350px; 
    background: blue; 
    overflow-y: auto;  
} 
#C~#B { 
    height: 300px; 
}

http://jsfiddle.net/VtWAY/2

應該有IE7 +支持http://reference.sitepoint.com/css/generalsiblingselector

編輯：只工作，如果你還在交換B和C html。 http://jsfiddle.net/VtWAY/4/

來源

2012-11-28 22:59:58 flyingjamus

不知道，謝謝！ – Joril

不幸的是'＃C〜＃B {height：300px; }'不會對HTML做任何事情：http://jsfiddle.net/thirtydot/VtWAY/3/。如果向下滾動，您可以看到「＃B」仍然高出350px。在您發佈的參考鏈接中，閱讀「必須先發生」部分附近。 – thirtydot

糟糕...我確定它在過去某個時間對我有用。不要猜測，對不起。當然，如果你交換'B'和'C'的順序，它就可以工作。 – flyingjamus

如何將overflow-y div擴展到垂直可用空間？

回答

相關問題