css - CSS：可変高さ要素内のセクションの高さを修正

Question

この質問に関連しています。

これがフィドルです：http：//jsfiddle.net/DRbRS/

赤で囲まれたリストdivが緑のコンテナdivの下部に配置されていないことに注意してください。

問題は、ヘッダーの高さがわかっていても、結果として得られるリストの高さを事前に知る方法がないことです。

javascriptに頼らずにこれに対処する方法はありますか？

必要なのは次のようなスタイルですheight: fill;

Answer 1

position: absolute上、左、右、下の使用と設定：http: //jsfiddle.net/QARC9/

この記事では、それが機能する理由について説明します。

http://www.alistapart.com/articles/conflictingabsolutepositions/

Answer 2

CSSをこれに置き換えます

#container {

    left: 50px;
    width: 200px;
    position: fixed;
    height: 90%;
    border: 2px dashed green;
}


#header {
    height: 30px;
    line-height: 30px;
    text-align: center;    
    border: 2px dashed blue;
    margin-left:-2px;
    margin-top:-2px;
    width:200px
}

#list {    
    border: 2px dashed red;
    overflow: auto;
    height: 91%;
    width:200px;
    margin-left:-2px;
    margin-top:-2px;


}​

または、こちらのデモをご覧くださいhttp://jsfiddle.net/enve/DRbRS/3/