2012-05-02 21 views
1

this questionに関連する。赤概説リストdiv要素が緑色のコンテナのdivの下部に整列しない方法http://jsfiddle.net/DRbRS/CSS:可変高さ要素内のセクションの高さを固定

お知らせ:

はここでフィドルです。

問題は、ヘッダーの高さが分かっていても、リストの結果の高さが何であるべきかを事前に知る方法がないことです。

JavaScriptを使用せずにこれに対処する方法はありますか?

必要なのはheight: fill;

+0

だから、一定の高さのコンテナのdiv、一定の高さとその内部のdiv要素を持っていて、残りの高さをつかむためのdiv他の内部をしたいですか? – AlexMA

+0

コンテナdivは*調整可能な高さ( 'height:100%'など)を持ちます。私は、私のソリューションがこれに対処する唯一の現在の方法であり、 'position:absolute'を大いに活用していることをかなり確信しています。 –

答えて

5

を参照して、下で:http://jsfiddle.net/QARC9/

この記事では、その理由を説明します。

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

+0

これは良い答えです。私の唯一のコメントは、ほとんどの場合、コンテナのposition:relativeを使用することです(ラッパー要素なしのこのフィドルでは機能しません)。 – AlexMA

+0

私の特別なケースでは、私のリストが位置:固定ページ要素内に必要でした。このメソッドは、またはのいずれかで正常に動作します。 –

0

ようなスタイルは、この

#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; 


}​ 

であなたのCSSを交換するか、右、左、position: absoluteを使用して、トップの設定ここでは、デモhttp://jsfiddle.net/enve/DRbRS/3/

+1

これは動作しません。収容領域の垂直方向のサイズを変更します。これはブラウザビューポートの特定の高さに対してのみ機能します。 –

関連する問題