CSS標準モード

お会いできてうれしいです。以下のことをお聞きしたいと思います。
CSS標準モード

 
<body> 
    <div style="border:1px solid #ff0000"> 
     <pre>dfssdgfdsgsd sdgsdg 
     sgdsdsgsdg</pre> 
    </div> 
    <div style="border:1px solid #ff0" id="secondDiv"> 
     ggg 
    </div> 
</body>

それは#secondDivが残っている垂直方向のスペースの（高さ）100％を取るために作ることはできますか？私はmin-height（つまり、動作しません）またはjavascriptを使いたくありません。
完全なHTML http://paste2.org/p/1177197
ありがとうございました。
ps：多くの関連する質問があることを知っていますので、重複した場合は申し訳ありません。

出典

2011-01-04 tasoss

'分 - height'のみIE6では動作しません。 – BoltClock

最初のdivの高さは固定されていますか？ –

を設定する必要があると考えていますdiv、絶対位置指定を使用します。

CSS

html,body{ 
    margin:0; 
    padding:0; 
    width:100%; 
    height:100%; 
} 
#head{ 
    border:1px solid #ff0000; 
    height:50px; 
} 
#content{ 
    position:absolute; 
    top:50px; 
    bottom:0; 
    width:100%; 

    border:1px solid #ff0; 
}

HTML

<body> 
    <div id="head"> 
     <pre>dfssdgfdsgsd sdgsdg 
     sgdsdsgsdg</pre> 
    </div> 
    <div id="content"> 
     ggg 
    </div> 
</body>

デモ：http://www.jsfiddle.net/RVTpT/

出典

2011-01-04 19:08:46

もちろん... #headの高さが固定されていない場合は、純粋なCSSソリューションをお考えですか？ btwありがとう:) – tasoss

@タコス、純粋なCSSではできません。（*要件に依存する*）トリック（*は、**絶対位置指定なしで100％の高さ '＃content' **内に'＃header'を置くことです。あなたの例のように罫線を使用したい場合は動作しません.. –

#secondDiv { height:100%; }をCSSに追加してください。

私はあなたがトップのdivのために一定の高さを使用することができる場合、第二を回避するのは簡単です、これはIEで動作させるためにあなたが

html, body { height:100%; }

同様

出典

2011-01-04 17:55:36

@Gaby：そうではありません...最初のdivには20％、2番目のdivには80％を使用すると思いますか？可能な代替手段（高さを持たない）は、例。 – tasoss

これは役に立ちません。 #secondDivは最初のdivが存在することを無視して100％のボディを持ちます。 – tasoss

@tasossの場合、問題は、高さを定義すると（単位が '％'または 'px' *であれば）、高さが固定されていることを意味します。 –

答えて

関連する問題