0

私は自分のサイトに960pxの固定幅のコンテナを使用しています。

ただし、ページにボックスシャドウを追加し、左右の余白のサイズを大きくするラッパーを追加したいと思います。

http://jsfiddle.net/2QqxB/5/embedded/result/で目的の効果を確認できます。

問題は、1024 x 768で、ラッパーが1020pxであるため、水平スクロールバーが表示されることです。

では、背景画像を使用せず、水平スクロールバーを使用せずに、どうすれば同じ効果を実現できますか。

コード（http://jsfiddle.net/2QqxB/5/にもあります）：

HTML：

<div id="wrap">
    <div id="container">
        <p>
            Lorem ipsum dolor sit amet...
        </p>
    </div>
</div>​

CSS：

html, body {
 height: 100%;   
}

body {
 background-color: #f3a450;   
}

#wrap {
 width: 1020px;
 box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.4);
 margin: 0 auto;
 min-height: 100%;
 background-color: #fff;
}

#container {
 width: 960px;
 margin: 0 auto;
}
4

1 に答える 1

2

ノーマル/最小/最大幅を使用して動作させることができます#wrap：

  • min-width内部コンテンツが非常に広いため、960pxである必要があります
  • max-width白い領域のデフォルトの幅であるため、1020pxである必要があります
  • width常にウィンドウの端に触れるように100％に設定されています

例を参照してください：http：//jsfiddle.net/2QqxB/7/

#wrap {
  max-width: 1020px;
  min-width: 960px;
      width: 100%;
}

#container {
  width: 960px;
}
于 2012-06-26T10:17:45.087 に答える