子のDIVの高さを変数兄弟の親DIVの高さに合わせる

Question

私はコンテナを指定した高さの<div>を持っています。さらに2つのDIVが入っています。導入コピーはクライアントによって入力され、様々な機能を備えています。

フィーチャー<div>は、親の残りのスペースを自動的に埋めるようにしてから、オーバーフローをスクロールアウトします。

どうすればよいですか？

CSS：

#article { 
    width:940px; 
    height:500px 
} 

#article-content { 
    margin: 20px 0; 
} 

#article-features { 
    height:100%; 
    overflow-x: auto; 
} 

jsFiddle

Answer 1

動的に下の高さを変更するためにはJavaScriptに頼る以外HTML4でそれを行うための方法はありませんが、計算に基づいてDIV（parent_height - sibling_height）。

あなたはこれを見て：CSS HTML - DIV height fill remaining space

はHTML5を使用すると、残りのスペースを使用するフレキシボックスを使用することができます。いくつかの制限がありますが、要件に答えることができます。 http://caniuse.com/#feat=flexboxを参照してください。