Question

我有一个网站，其中包含以下设置：

<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的每一侧都有一个阴影。但是，在执行此操作时，如果内容未占据整个高度，则由于模糊，阴影会超过页脚底部而导致滚动条仍然存在。

是否有某种方法可以防止阴影越过容器div的边缘并导致滚动条？

感谢您的帮助！

Answer 1

Webkit最近改变了它的行为，如下所示： http://archivist.incutio.com/viewlist/css-discuss/109662

事实上，截至今天，它仍然是Gecko和其他浏览器的问题。

我设法使用负边距在Gecko上解决这个令人讨厌的问题，这也适用于所有其他浏览器。

假设你有一个屏幕宽的元素（E），其中盒子阴影应用了零偏移和模糊半径R.我们假设你正在处理水平滚动条问题，因为阴影会导致元素E重新布局并增加宽度。

用辅助包装元素（W）包装E
设置溢出：隐藏在W
设置填充：W
设置保证金：W

这个想法是使用隐藏的溢出来剪掉左边和右边有问题的阴影。然后使用填充+负边距技巧不剪辑顶部和底部阴影，并将框保持在HTML流程中的相同位置。

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

Answer 2

Imho，根据我的测试，似乎元素上的css阴影正在增加页面的总宽度和高度（如果周围元素的宽度或高度设置为100％），正如您所说，我还没有找到这个问题的css解决方法。

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

我尝试过绝对定位（因为我以前想要在页面底部放一个页脚），但问题是宽度相同，当然你可以将宽度设置为百分比像90％，但问题仍然存在...... 这是一个说明这个简单概念的片段所以这不是一个真正的答案，我还没有找到解决方案

pastebin

希望这是有用的

Answer 3

在#container的父元素上，添加overflow: visible可能会解决问题。

虽然作为底部页脚的一般建议，但您可能希望忘记在min-height上设置#container，而是设置position: absolute和bottom: 0的页脚并给#container一个margin-bottom所以它永远不会隐藏在页脚后面。如果您打算在页面底部放置页脚，请改用position: fixed。

希望它有所帮助。

Answer 4

尝试将 padding-bottom：8px （阴影高度+模糊大小）添加到 #container 元素。

Answer 5

至少对我来说更好的解决办法，因为它不涉及包裹元素，就是在带有阴影的元素上放置剪裁矩形。

在上面的示例中有类似的东西 clip: rect(-LARGE_VALUE -LARGE_VALUE auto LARGE_VALUE)只会将阴影剪切在底部。

Answer 6

这个问题的解决方案是非常模糊的，或者没有当前技术的解决方案。它真的太糟糕了，因为它是网页设计中的一个共同主题，所以无法实现这一点。

我使用了png阴影，因为它似乎是唯一理智的解决方案。

Answer 7

不确定这是否是最佳解决方案，因为您必须添加容器div，但如果将元素包装在容器div中并将溢出设置为隐藏，则它似乎有效。你必须在任何你希望阴影可见的地方设置填充。

我知道这不是最好的解决方案，但它工作正常，我似乎无法弄清楚任何其他解决方案。

Answer 8

我有一个100％高度的div（即屏幕上的全高），并且有一个盒子阴影：
box-shadow: 0 0 10px rgba(0,0,0,0.4);

这导致滚动条出现，即使内容不长于屏幕。

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

Answer 9

请在您的影子div中添加position: relative;，从标题，内容，页脚中删除。它在我身边工作。

容器div上的CSS框阴影会导致滚动条

9 个答案: