div内の2つの水平divsの流体の高さ

Question

私はWebデザイナーではありません。私はasp.netプログラマーです。IE7では苦労しています。 さて、私はIE8、IE9、Chromeで私が望むことをすることができました。 今IE7で動作させる必要があります。 " - // W3C // DTD XHTML 1.0過渡// EN"「http://www.w3.org/TR/xhtml1/DTD

は、まず、これは

私はDOCTYPE用HTML PUBLICを使用しています私の源であります/xhtml1-transitional.dtd」

とHTMLのxmlns = "http://www.w3.org/1999/xhtml" のlang = "KO" XML：LANG = "KO"

<style type="text/css"> 
    html { 
    height: 100% 
} 
body { 
    background-color: #5c87b2; 
    font-size: .85em; 
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif; 
    margin: 0; 
    padding: 0; 
    color: #696969; 
    border: 0; 
    overflow: visible; 
    height: 100%; 
    max-height: 100%; 
} 
</style> 

<div id="header" style=" 
         display:block; 
         position:fixed; 
         height:50px; width:100%; 
         background-color:red;"> 
         d 

</div> 
<div id="menu" style=" 
         display:block; 
         position:fixed; 
         width:200px; 
         top:50px; left:0; right:auto; bottom:0; 
         background-color:blue;"> 
         d 

</div> 
<div id="button" style=" 
         display:block; 
         position:fixed; 
         width:auto; height:100px; 
         top:50px; left:200px; right:0; bottom:auto; 
         background-color:Yellow;"> 
         d 
</div> 
<div id="content" style=" 
         display:block; 
         position:fixed; 
         width:auto; height:auto; 
         top:150px; left:200px; right:0; bottom:0; 
         background-color:green;"> 
    <div style=" 
       position:relative; 
       height:50%; 
       min-height:50%; 
       border:3px solid pink; 
       ">12412 
    </div> 
    <div style=" 
       position:relative; 
       height:50%; 
       border:3px solid white; 
       "> 
       2214124 
    </div> 
</div> 

私は左側（青色）、サブヘッダー（黄色）、コンテナ（緑色）のヘッダ（赤色） と私はコンテナ内の2つのdivs（ピンク、白いボーダー）が必要です。 容器を垂直に100％充填する必要があります。 外側のdivの位置はすべて固定です。 そして私は内部のdivsの相対的な位置を与え、両方に50％の高さを与えました。 IE8,9、Chromeでは正常に動作します。

私はスクリプトを使用しません。 CSSスタイルのみを使用しようとしています。

だからあなたは私にいくつかの助けてくれますか？

ありがとうございました!!!!!!

Answer 1

外側の#content divの高さを設定すると、内側のdivが他のブラウザと同じように表示されます。フルスクリーンのパネル設定をお探しの場合、どのようにピクセル値でこれを達成できるかわかりません。 pxから％に変更し、流体としての位置と幅/高さを指定すると、IE7で望ましい効果が得られるようです。

http://jsfiddle.net/VCztH/3/