1

私は 3 つのネストされた div を持っています。内側の div は高さが固定され、中央の div は外側の div を埋め、外側の div は一番下に固定されたフッターに対応しています。しかし、中間の div は内側の div と同じ高さしかないようです。これは望ましくありません。

私は問題を次のように減らしました。これは最小限の例だと思います。残りのレイアウトに干渉するため、外側または内側の div の高さプロパティを変更したくありません。中央の div のプロパティを変更するだけで、私がやりたいことを行う方法はありますか?

html は次のとおりです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="style.css" />
    </head> 

    <body>
        <div id="outer">
            <div id="middle">
                <div id="inner"></div> 
            </div>
        </div>
    </body>
</html>

そしてCSS：

html{height:100%;}
body{height:100%;}
#outer{height: auto; min-height: 100%;}
#middle{height: 100%;}
#inner{height:500px;}

divが高さ500になることを確認できますが、#middledivを埋めたいです#outer。

私は CSS の完全な初心者であり、ほとんどすべてのコードはさまざまなチュートリアルや試行錯誤からコピーされています。だから、私が露骨に間違ったこと/ばかげたことをしているなら、すみません。

編集:理由はわかりませんが、doctype 宣言を削除すると問題が解決するようです。したがって、宣言を含めるようにコード サンプルを変更しました。

4

1 に答える 1

0

あなたの間違いは、'body' と 'html' クラスを height: 100% (何もしない) にすることでした。代わりに、外側の div を 100% の高さにします。

<html>
<head>
<style type="text/css">
div {border:2px solid black;}
div div {border-color: blue;}
div div div {border-color: red;}
#outer{height: 100%; min-height: 100%;}
#middle{height: 100%;}
#inner{height:500px;}
</style>
</head> 

<body>
    <div id="outer">
        <div id="middle">
            <div id="inner"></div> 
        </div>
    </div>
</body>
</html>

ミックスでフッターを取得する方法がわからない場合は、例も示します。

<html>
    <head>
<style type="text/css">
div {border:2px solid black;}
div div {border-color: blue;}
div div div {border-color: red;}
#outer{height: 100%; min-height: 100%; position: relative;}
#middle{height: 100%;}
#inner{height:500px;}
#footer{height:100px;width:100%;position:absolute;bottom:0;}
</style>
    </head> 

    <body>
        <div id="outer">
            <div id="middle">
                <div id="inner"></div> 
            </div>
            <div id="footer">This is the footer</div>
        </div>
    </body>
</html>
于 2013-03-20T18:04:28.667 に答える