4

ページ全体は次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
    <style>
        body {margin: 0; background: yellow;}

        .bar {width: 100%; background: pink;}

        .content {width: 800px; margin: 0 auto;}
    </style>
</head>

<body>
    <div class="bar">
        <div class="content">
            This is content~
        </div>
    </div>
</body>
</html>

私の意図は、ブラウザ表示の水平方向の長さ全体をピンクのバーで埋めることです。ウィンドウの幅が 800 ピクセルよりも広い場合、バーのコンテンツは中央に配置されたままになり、幅が 800 ピクセルよりも狭い場合は固定され、水平方向にスクロール可能になります。ただし、ブラウザが狭くなり、右にスクロールすると、ピンク色のバーが右端に達しません。この場合、ボディの黄色が代わりに表示されます。

この問題は、最新の Firefox、Chrome、および IE8 で見られます。

4

2 に答える 2

2

コンテンツの背景をピンクにする必要があります

.content {width: 800px; margin: 0 auto;background: pink;}

また

バーの最小幅をコンテンツ幅にします。

.bar {width: 100%;min-width:800px;background: pink;}
于 2012-06-19T13:19:25.690 に答える
0

最良の方法はmin-width、コンテンツの幅と同じに設定することです。

iPhone やタブレット用の Web サイトも作成しようとしている場合は、各ビューポートの幅を個別に定義できます。

于 2012-06-19T13:33:47.933 に答える