CSS盒子阴影导致滚动条

我有以下设置一个网站：CSS盒子阴影导致滚动条

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

我使用clearfooter和容器外的页脚保持页脚在当ISN页面的底部没有足够的内容。

我的问题是，我想通过以下方式对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的边缘，导致滚动条的一些方法？

感谢您的帮助！

来源

2010-03-01 Jason Turner

的Webkit最近改变其行为在此间指出， http://archivist.incutio.com/viewlist/css-discuss/109662

事实上，正如今天它仍然是壁虎的问题，也许其他的浏览器。

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

假设您有一个屏幕宽度的元素（E），应用了零偏移和模糊半径R的框阴影。让我们假设您正在处理水平滚动条问题，因为阴影会导致元素E以扩展宽度重新布局。

涡卷ë用辅助包装元素（W）
集溢出：隐藏W上
集填充，R 0 R 0 W上
集余量：-R 0 -R 0 W上

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

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

来源

2010-07-10 20:48:34

谢谢！为了澄清你的帖子给他人'R'是你模糊的半径（我有一个缓慢的一天，它花了我一秒）。 – mikemaccana 2011-02-01 18:43:43

@达尔文，你能提供一个这样的例子。最近我一直没有处理这个问题。如果你能提供一个快速演示它的工作，我会改变我选择的答案。谢谢，这听起来很有希望。 – 2011-08-31 00:04:10

纯粹的迷人！ :) – 2011-11-02 19:55:57

恕我直言，并根据我的测试看来，一个元素的CSS影子同时增加页面的总宽度和高度（如果周围的元素的宽度或高度设置为100％），就像你说的，我还没有发现了一个解决这个问题的css解决方案。

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

我试过绝对定位（因为我习惯于在页面底部需要页脚），但问题与宽度相同，当然可以将宽度设置为像90％的比例，但问题仍然存在... 下面是说明这个简单的概念所以这不是一个真正的答案的一个片段，我还没有发现一个解决方案尚未

pastebin

希望这是非常有用的

来源

2010-03-02 13:57:18 ghedamat

我已经扩展了CSS来向你展示我是如何完成这个的。这样做模仿了布局与基于表格布局的行为方式。 – 2010-03-02 21:50:46

论父元素，加入overflow: visible可能会解决此问题。

虽然在底部的页脚一般建议，您可能要改为忘记设置上#container的min-height，而是设置页脚position: absolute和bottom: 0，给#container一个margin-bottom因此它不会永远得到背后的隐忧页脚。如果您打算让窗口底部的页脚改为使用position: fixed。

希望它有帮助。

来源

2010-03-04 02:32:56

做绝对位置会使页脚看起来像浏览器窗口的底部而不是网站页面的底部，这在大多数情况下并不是用户所期望的或习惯的。 – 2010-03-04 02:59:04

虽然'溢出'有帮助吗？ – 2010-03-04 05:05:48

不，它没有。根据w3schools ref页面，可见是默认值。（还是）感谢你的建议。 – 2010-03-04 19:27:18

那么这个问题的解决方案是非常模糊的，或者没有现有技术的解决方案。它真的太糟糕了，没有办法完成这个，因为它是网页设计中的一个常见主题。

我使出用一个PNG影子，因为它似乎是唯一明智的解决方案。

来源

2010-05-13 02:05:49

当时，正在寻找解决方案，这也是：/ – raidfive 2010-09-24 05:43:14