1

私はこのようなレイアウトを持っています：

<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は互いに積み重ね、BはAとCの間の残りのスペースを埋め、内容が多すぎる場合はスクロールバーを表示する必要があります。
私の問題は、Cが欠落している場合があるということですが、Bを動的に拡張して、そのスペースを確保するにはどうすればよいですか？

4

2 に答える 2

2

考えられるアプローチの1つは次のとおりです。

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

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

したがって、#Bが最後の子である場合は、高さを手動で正しい値に設定します。

:last-childブラウザのサポート。

于 2012-11-28T22:01:11.950 に答える
1

別のアプローチは、~セレクターを使用することです。

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

http://jsfiddle.net/VtWAY/2

IE7+がhttp://reference.sitepoint.com/css/generalsiblingselectorをサポートしている必要があります

編集：htmlでBとCも交換した場合にのみ機能します。http://jsfiddle.net/VtWAY/4/

于 2012-11-28T22:59:58.970 に答える