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

【问题标题】：CSS box shadow on container div causes scrollbars容器 div 上的 CSS 框阴影导致滚动条
【发布时间】：2011-01-22 12:10:56
【问题描述】：

我有一个具有以下设置的网站：

<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 的边缘并导致滚动条？

感谢您的帮助！

【问题讨论】：

标签： css scrollbar shadow clip

【解决方案1】：

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

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

我尝试过绝对定位（就像我习惯在页面底部添加页脚时所做的那样）但是问题它与宽度相同，当然您可以将宽度设置为百分比像90％，但问题仍然存在...... 这是一个说明这个简单概念的 sn-p 所以这不是一个真正的答案，我还没有找到解决方案

pastebin

希望对你有用

【讨论】：

我已经扩展了 css 来向您展示我是如何实现这一点的。这样做会模仿布局在基于表格的布局中的行为方式。

【解决方案2】：

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

尽管作为底部页脚的一般建议，您可能希望忘记在#container 上设置min-height，而是使用position: absolute 和bottom: 0 设置页脚并给#container 一个@987654328 @ 所以它永远不会隐藏在页脚后面。如果您要在窗口底部添加页脚，请改用position: fixed。

希望对你有帮助。

【讨论】：

执行绝对位置会使页脚看起来附加到浏览器窗口的底部，而不是网站页面的底部，这在大多数情况下不是用户期望或习惯的。
overflow 有帮助吗？
不，它没有。根据 w3schools 参考页面，可见是默认值。不过感谢您的建议。

【解决方案3】：

好吧，要么这个问题的解决方案非常模糊，要么目前的技术没有解决方案。实在是太糟糕了，因为它是网页设计中的一个常见主题，所以没有办法做到这一点。

我求助于使用 png 阴影，因为它似乎是唯一合理的解决方案。

【讨论】：

dang，也在寻找解决方案：/

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

事实上，直到今天它仍然是 Gecko 和其他浏览器中的一个问题。

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

假设您有一个屏幕范围的元素 (E)，其 box-shadow 应用了零偏移和模糊半径 R。假设您正在处理水平滚动条问题，因为阴影导致元素 E 重新布局并增加了宽度。

用辅助包装元素 (W) 包装 E
设置溢出：W 上隐藏
设置填充：R 0 R 0 on W
设置边距：-R 0 -R 0 on W

这个想法是使用溢出隐藏来剪掉左右有问题的阴影。然后使用 padding+negative margin 技巧来不剪裁顶部和底部阴影，并保持盒子在 HTML 流中的同一位置。

您可以调整这种技术来剪掉有问题的阴影框的任意边。

【讨论】：

谢谢！为了向其他人澄清您的帖子，“R”是您的模糊半径（我今天过得很慢，花了我一秒钟）。
@Darwin，你能提供一个样本吗？我最近一直没有解决这个问题。如果您可以提供其工作的快速演示，我将更改我选择的答案。谢谢，听起来很有希望。

【解决方案6】：

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

【讨论】：

【解决方案7】：

至少对我来说更好的解决方案是，因为它不涉及包装元素，所以在带有阴影的元素上放置一个剪切矩形。

在上面的例子中，类似 clip: rect(-LARGE_VALUE -LARGE_VALUE auto LARGE_VALUE) 只会剪掉底部的阴影。

【讨论】：

【解决方案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); 解决了。

【讨论】：

【解决方案9】：

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

【讨论】：