Question

问题：

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

我有几个图像分层在一起以创建背景渐变，但无论出于何种原因，两个侧面渐变都没有填满整个页面。所有渐变都在包裹整个页面的元素中。如果我将其中一个div的溢出设置为overflow：auto;我可以将该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“overflow：hidden”，以使背景重复到包含的子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;  
}

Answer 2

好吧，似乎发生了某种高度继承。 <div>区域内的元素具有手动设置的高度，当我从该元素移除高度时，背景填充整个页面。我没有丝毫的线索，为什么会发生这种情况或是什么导致它。

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

问题：

CSS：

HTML：

2 个答案: