1

私は Web デザイナーではありません。私はただの asp.net プログラマーであり、IE7 で苦労しています。まあ、私はIE8、IE9、およびChromeで私が望むものをうまく動かすことができました。今、IE7で動作させる必要があります。

まずこれが私のソースです

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/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つのdivが必要です（ピンク、白の境界線）。コンテナーを垂直方向に 100% 満たす必要があります。外側の div の位置はすべて固定されています。そして、内側の 2 つの div の位置を相対的に指定し、両方に 50% の高さを指定しました。IE8,9、Chromeで問題なく動作します。

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

だから皆さん、私に助けてもらえますか??

ありがとう！！！！！

4

1 に答える 1

0

外側の #content div に高さを設定すると、内側の div を他のブラウザーと同じように表示できます。フルスクリーン パネルのセットアップを探しているので、ピクセル値でこれを実現する方法がわかりません。px から % に変更し、位置と幅/高さを流体として指定すると、IE7 で目的の効果が得られるようです。

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

于 2012-04-20T14:21:53.200 に答える