6

こんにちは、CSS を使用してレイアウトを作成しようとしていますが、奇妙な問題に直面しています。私にとっては奇妙です。Header、Footer、およびMainContentの3 つの div があります。範囲。ヘッダーとフッターは 100% の一定幅のままにする必要がありますが、MainContent 領域は中央で 996 ピクセルに固定する必要があります。これで問題ありませんが、ブラウザ ウィンドウの幅を 996 ピクセル未満に変更してから、ウィンドウのコンテンツを右にスクロールすると、100% のヘッダーとフッターが切り捨てられ、100% ではなくなります。問題を説明するために、必要最小限のスクリプトを作成しました (スタイルをインラインにしてコンパクトに保ちます)。ウィンドウのサイズが変更されたときにスクロールバーをオフにするために、overflow:hidden を各コンテナに追加できることはわかっています。また、幅が特定の幅を下回った場合に div を強制的に幅に戻すための小さな jQuery を作成しました。しかし、私の質問は CSS に関するものです。この問題に対するより良い純粋な CSS 修正はありますか? または、なぜこれが起こるのか誰か説明できますか? 前もって感謝します！点C

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>div width test</title>
</head>
<body style="border:none; margin:0; padding:0; height:100%; width:100%">

    <div id="header-content" style="width:100%; margin:0; padding:0; background-color:#0000ff; height:50px"></div>

    <div id="main-content" style="width:996px; margin:0; padding:0; background-color:#ff00ff; height:250px; margin:auto">
        <div id="inner-content">
            CONTENT OF THE PAGE HERE
        </div>
    </div>
    <div id="footer-content" style="width:100%; margin:0; padding:0; background-color:#00ffff; height:70px"></div>
</body>

4

2 に答える 2

4

あなたの問題については完全にはわかりませんがmin-width:996px;、ヘッダーとフッターを設定して、少なくともコンテンツと同じ幅に保つことができます.

于 2010-09-27T15:23:15.483 に答える
1

これを試して、HTML5 の doctype を使用してください。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body{margin:0;text-align:center;}
            .header,.content,.footer{text-align:left;clear:both;margin:0 auto;}
            .header,.footer{width:100%;background-color:blue;height:128px;min-width:996px;}
            .content{width:996px;height:512px;background-color:red;}
        </style>
        <title>Index</title>
    </head>
    <body>
        <div class="header">
            Header stuff here
        </div>
        <div class="content">
            Page content stuff here
        </div>
        <div class="footer">
            and your footer...
        </div>
    </body>
</html>
于 2010-09-27T16:07:54.837 に答える