0

我正在为我的网站使用 960 像素的固定宽度容器。

但是，我想添加一个包装器，为页面添加一个盒子阴影并增加左右边距的大小。

您可以在http://jsfiddle.net/2QqxB/5/embedded/result/看到想要的效果。

问题是在 1024 x 768 时我得到一个水平滚动条，因为包装器是 1020 像素。

那么如何在不使用背景图像和不使用水平滚动条的情况下达到相同的效果。

代码（也在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 回答