0

コンテナー div 内で複数の div を使用している単一ページの Web サイトがあります。これらのそれぞれの高さは、100% の min-height に設定されています。これは、いずれかの div 内のコンテンツがブラウザーの解像度よりも大きくなるまで正常に機能します (コンテンツが境界 div と重なる)。コンテナに position:relative を追加しようとしましたが、 position:absolute を子に追加しようとしましたが、これにより、下部の div 以外がすべて消えてしまいます。

私が話していることを示すために、以下をまとめました。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
    <body>
        <div id="container">
            <!-- Content -->
            <div id="content">
                <h1>content</h1>
            </div>
            <!-- About -->
            <div id="about">
                <h1>about</h1>
            <!-- Contact -->
            <div id="contact">
            </div>
        </div>
    </body>
</html>

CSS

html, body{height:100%;min-height:100%;min-width:60.000em;font-size:30px;}
#container{
    width:100%;
    min-height:100%;
    margin:auto;
    padding:auto;
    height:100%;
    position:relative;
}
#content, #about, #contact {
    position: absolute;
}
#content{
    min-height: 100%;
    height:100%;
    background-color:red;
}
#about{
    min-height: 100%;
    background-color:blue;
}
#contact {
    min-height: 100%;
    background-color:yellow;
}

ここで動作しています： http://jsfiddle.net/s62nr/1/

相対/絶対配置を削除すると、サイズは問題ありませんが、コンテンツが重複します: http://jsfiddle.net/s62nr/2/

私は何が欠けていますか？

4

1 に答える 1

1

問題が見つかりました（これは私が質問するときに常に発生するようです^^）。

問題は、子のdivの高さを100％に設定していたという事実にありました。これは削除する必要があります：

から：

#content{
    min-height: 100%;
    height:100%;
    background-color:red;
}

に：

#content{
    min-height: 100%;
    background-color:red;
}

私はコンテンツがブラウザの高さの100％を占めるように強制していました。これにより、divが自動的に拡張されなくなりました。

于 2013-01-27T21:06:30.880 に答える