CSS盒子阴影在容器div上会导致滚动条

7

我有一个网站,设置如下:

<div id="container">
   <div id="header"></div>
   <div id="content"></div>
   <div id="clearfooter"></div>
</div>
<div id="footer"></div>

我使用clearfooter和容器外的页脚来使页脚在内容不足时保持在页面底部。

我的问题是,我想以以下方式在容器div上应用盒子阴影:

#container {width:960px; min-height:100%; margin:0px auto -32px auto; 
           position:relative; padding:0px; background-color:#e6e6e6; 
           -moz-box-shadow: -3px 0px 5px rgba(0,0,0,.8), 
           3px 0px 5px rgba(0,0,0,.8);}
#header   {height:106px; position:relative;}
#content   {margin:0px; padding:10px 30px 10px 30px; position:relative;}
#clearFooter {height:32px; clear:both; display:block; padding:0px; margin:0px;}
#footer   {height:32px; padding:0px; position:relative; width:960px; 
           margin:0px auto 0px auto;}

如您所见,这是容器div两侧的投影。然而,当内容无法占满整个高度时,由于模糊效果导致阴影超出footer底边,因此仍会出现滚动条。

有没有办法防止阴影超出容器div边缘并导致滚动条呢?

感谢您的帮助!

9个回答

9

最近Webkit改变了其行为,正如此处所指出的: http://archivist.incutio.com/viewlist/css-discuss/109662

事实上,截至今天,在Gecko和其他浏览器中仍然存在这个问题。


我成功地使用负边距在Gecko上解决了这个恶心的问题,这种方法也适用于所有其他浏览器。

假设您有一个应用了零偏移和模糊半径R的盒阴影的全屏元素(E)。假设您正在处理由于阴影导致元素E重新布局并增加宽度而引起的水平滚动条问题。

  1. 用辅助包装元素(W)包装E
  2. 在W上设置overflow:hidden
  3. 在W上设置padding: R 0 R 0
  4. 在W上设置margin: -R 0 -R 0

这个技巧的思路是使用overflow hidden来剪裁左右有问题的阴影。然后使用padding + 负边距技巧来不剪裁顶部和底部的阴影,并将盒子保持在HTML流的相同位置。

您可以调整此技术以剪裁您问题阴影框的任意一侧。


谢谢!为了让其他人更清楚,'R'是你模糊的半径(我今天有点迟钝,花了一会儿才明白)。 - mikemaccana
@Darwin,你能提供一个样例吗?我最近没有处理这个问题的任何工作。如果你能提供一个快速演示它的工作原理,我会更改我的选定答案。谢谢,听起来很有前途。 - Jason Turner

2
#container的父元素上添加overflow: visible可能会解决问题。然而,对于底部的页脚,您可能希望忘记在#container上设置min-height,而是使用position: absolutebottom: 0来设置页脚,并给#container添加一个margin-bottom,以便它永远不会被页脚遮挡。如果您想让页脚位于窗口底部,只需使用position: fixed即可。希望这能帮到您。

将footer的绝对定位会使其出现在浏览器窗口底部,而不是网站页面底部,这不是大多数用户所期望或习惯的。 - Jason Turner
溢出(overflow)有帮助吗? - Andrew Marshall
没有。根据w3schools参考页面,visible是默认值。感谢建议。 - Jason Turner

1

依据我的测试和个人看法,似乎在元素上使用CSS阴影会增加页面的总宽度和高度(如果周围的元素宽度或高度设置为100%),正如你所说,我还没有找到解决这个问题的CSS解决方法。

所以我有一个问题想问你,你是如何将页脚保持在页面底部的?页脚的宽度是多少?

我尝试过使用绝对定位(当我想要将页脚放在页面底部时,我通常会这样做),但是宽度的问题仍然存在。当然,你可以将宽度设置为百分比,例如90%,但问题仍然存在...下面是一个说明这个简单概念的代码片段。所以这不是一个真正的答案,我还没有找到解决方法。

pastebin

希望这对你有用。


我已经扩展了CSS,以展示我是如何实现这一点的。这样做模仿了基于表格布局的布局方式的行为。 - Jason Turner

1
尝试在#container元素中添加padding-bottom:8px(阴影高度+模糊大小)。

1
对我来说更好的解决方案,至少不需要包装元素,是在带有阴影的元素上放置一个剪辑矩形。
在上面的示例中,类似于clip: rect(-LARGE_VALUE -LARGE_VALUE auto LARGE_VALUE)的内容将仅剪辑底部的投影。

0

这个问题的解决方案可能非常难以理解,或者当前技术下没有解决方案。很遗憾,因为这是网页设计中的一个常见主题,所以无法实现。

我只好使用 PNG 阴影作为解决方案,因为这似乎是唯一明智的选择。


当时我也在寻找这个问题的解决方案 :/ - raidfive

0

我有一个 div,它的高度是 100%(即在屏幕上是全高度),并且有一个 box-shadow:
box-shadow: 0 0 10px rgba(0,0,0,0.4);

这会导致滚动条出现,即使内容没有超过屏幕。

我所做的就是设置一个负垂直偏移量:box-shadow: 0 -10px 10px rgba(0,0,0,0.4);,问题就解决了。


0

不确定这是否是最佳解决方案,因为您需要添加一个容器div,但是如果您将元素包裹在一个容器div中并将溢出设置为隐藏,似乎可以工作。不过,您需要在希望阴影可见的地方设置填充。

我知道这不是最好的解决方案,但它运行良好,我似乎找不到其他解决方案。


0
请在阴影div中添加position: relative;,并从标题、内容和页脚中删除它。在我的一侧可以实现该操作。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接