1

div #header width: 1000px; を取得しました。

#header {
width: 1000px;
margin: auto;
height: 164px;
}

全角の div #main-container

#main-container {
height: 278px;
background: url(images/mainbg.png);
width: 100%;
}

しかし、ヘッダーに設定されている 1000px 未満のサイズにウィンドウのサイズを変更すると、#main-container によって空のスペースが作成されます。

http://tinypic.com/view.php?pic=1zcmmpf&s=5

このスペースを削除して #main-container を全角にしたい

4

1 に答える 1

1

表示されているのは正しい CSS の動作です。

たとえば、次の HMTL スニペットを考えてみましょう。

<div id="header"></div>
<div id="main-container"></div>

次の CSS を使用します。

body {
    margin: 0;
}
#header {
    width: 1000px;
    margin: auto;
    height: 164px;
    background-color: yellow;
}
#main-container {
    height: 278px;
    background: pink url('http://placekitten.com/2000/278') top center no-repeat;
    width: 100%;
}

デモを参照してください: http://jsfiddle.net/audetwebdesign/5xwRu/

幅が 1000px を超えるページの場合、ヘッダーは予想どおり中央に配置されます。

#main-containerの幅が 100%であるため、背景画像がページの幅いっぱいに表示されます。

ページ幅を 1000px 未満に縮小すると、固定幅のヘッダーが幅が広すぎてビュー ポートに収まらず、オーバーフロー状態が発生するため、水平スクロール バーが表示されます。

この状況では、CSS エンジンは、計算された幅が 1000 ピクセル未満であり、オーバーフロー コンテンツ用に作成されたスペースを含まないビュー ポートの幅 (1000 ピクセル未満) を満たすため、右側に空白を作成します#main-container。#main-container

これはいくつかの方法で修正できますが、何をしたいかによって部分的に異なります。

次のように最小幅を設定できます。

#main-container {
    height: 278px;
    background: pink url('http://placekitten.com/2000/278') top center no-repeat;
    width: 100%;
    min-width: 1000px;
}

デモ フィドルの例 2 を参照してください。

注:overflow: hidden CSS プロパティが適用されるラッパー コンテナーがある場合があります。この場合、水平スクロール バーが表示されないことがあります。

于 2013-09-01T22:14:20.940 に答える