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 的每一侧都有一个阴影。但是，在这样做时，当内容没有占据整个高度时，仍然存在由于模糊导致阴影推过页脚底部而导致的滚动条。

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

谢谢你的帮助！

4

9 回答 9

9

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

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

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

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

  1. 用辅助包装元素 (W) 包装 E
  2. 设置溢出：隐藏在 W
  3. 设置填充：R 0 R 0 on W
  4. 设置边距：-R 0 -R 0 on W

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

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

于 2010-07-10T20:48:34.130 回答
2

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

尽管作为对底部页脚的一般建议，您可能希望忘记设置min-heighton#container而是使用 and 设置页脚position: absolute并bottom: 0给出#containeramargin-bottom这样它就不会隐藏在页脚后面。如果您打算在窗口底部使用页脚，请position: fixed改用。

希望能帮助到你。

于 2010-03-04T02:32:56.787 回答
1

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

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

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

糊盒

希望这有用

于 2010-03-02T13:57:18.550 回答
1

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

于 2010-07-11T08:09:30.693 回答
1

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

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

于 2010-09-01T20:49:35.907 回答
0

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

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

于 2010-05-13T02:05:49.590 回答
0

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

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

于 2010-06-16T14:52:25.600 回答
0

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

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

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

于 2011-05-05T16:29:06.477 回答
0

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

于 2017-11-02T15:15:29.960 回答