2

これはよく聞かれる質問であることは知っていますが、単純であるべきことに対する解決策がまったく見つかりませんでした。

これが私のコードです：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>

    <!--CSS STYLING-->
    <link rel="stylesheet" href="../cssReset.css" />
    <style>
        html, body {
            height: 100%;
        }
        #menu {
            height: 100px;
            background-color: red;
        }
        #center {
            height: 250px;
            background-color: green;
        }
        #main {
            height: 100%;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id='menu'>
    </div>
    <div id='center'>
    </div>
    <div id='main'>
    </div>
</body>
</html>

非常に単純ですが、最後の div をページの下部まで拡張することはできません。「auto」を使用すると、コンテンツがないため、何も表示されません。100% を使用すると、ブラウザーの高さが使用され、不要なスクロールバーが作成されます。

私に何ができる？

ありがとう。

4

4 に答える 4

0

私はあなたのマークアップをテストしました、それは最後の div 'main' がページの一番下まで伸びていることを示しています....何が表示されていますか? また、参照された cssReset.css にはどのようなスタイリング情報がありますか (ただし、これはページ html のスタイルによってオーバーライドされます)。

于 2013-05-29T19:02:01.187 に答える
0

たぶん、あなたが探しているものは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>

    <!--CSS STYLING-->
    <style>
        *{margin:0;padding:0}
        html, body {
            height: 100%;
        }
        #menu {
            height: 10%;
            background-color: red;
        }
        #center {
            height: 25%;
            background-color: green;
        }
        #main {
            height: 75%;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id='menu'>
    </div>
    <div id='center'>
    </div>
    <div id='main'>
    </div>
</body>
</html>
于 2013-05-29T19:16:44.437 に答える