css - 图像未填充包装 <div> 元素

Question

问题:

所以我有这个网页:http://a.yfrog.com/img610/3543/p4.png

我有几张图片叠加在一起以创建背景渐变，但无论出于何种原因，两侧的渐变都没有填满整个页面。所有渐变都在包裹整个页面的元素中。如果我将其中一个 div 的溢出设置为溢出:自动；我可以将该 div 滚动到页面的长度(我将其设置为 5000px 进行测试)，但它只在你看到那个小截止点的框中，据我所知，它在所有浏览器中都这样做。有什么问题？为了进一步说明，我说的是两侧的渐变是如何突然停止的。

---

CSS:

#super_wrapper { height:100%; }
#page_bg_top {
  background:url(../images/body/top_shadow.png) repeat-x top;
  height:400px;
}
#page_bg_topleft {
  background:url(../images/body/top_left.png) no-repeat top left;
  height:300px;
}
#page_bg_topright {
  background:url(../images/body/top_right.png) no-repeat top right;
  height:300px;
}
#page_bg_left {
  background:url(../images/body/left_shadow.png) repeat-y left;
  height:100%;
}
#page_bg_right {
  background:url(../images/body/right_shadow.png) repeat-y right;
  height:100%;
}

HTML:

<div id="super_wrapper"><div id="page_bg_top"><div id="page_bg_topleft"><div id="page_bg_topright"><div id="page_bg_left"><div id="page_bg_right">
... Page Body
</div></div></div></div></div></div>

Answer 1

首先，建议在您的标记中使用较少的 div，并且有更有效的方法来实现您想要的外观，但您将通过时间和实践来了解这一点。

首先，如果您希望左侧和右侧的渐变阴影跨越文档的高度，您需要具有这些背景图像的 div 位于除包装器之外的所有内容的外部。

所以这是正确的标记:

<div id="super_wrapper">
    <div id="page_bg_left">
        <div id="page_bg_right">
            <div id="page_bg_top">
                <div id="page_bg_topleft">
                    <div id="page_bg_topright">

                    ... Page Body
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

接下来，您需要为这两个 div 设置“溢出:隐藏”，以便使背景重复到包含的子 div 的整个高度。

像这样:

#page_bg_left {
  background:url(../images/body/left_shadow.png) repeat-y left;
  height:100%;
  overflow: hidden;
}
#page_bg_right {
  background:url(../images/body/right_shadow.png) repeat-y right;
  height:100%;
  overflow: hidden;  
}