容器div上的CSS盒子阴影导致滚动条 [英] CSS box shadow on container div causes scrollbars

问题描述

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

I have a website with the following setup:

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

我使用容器外的clearfooter和footer将页脚保留在页面底部没有足够的内容。

I use the clearfooter and a footer outside the container to keep the footer at the bottom of the page when there isn't enough content.

我的问题是，我想在容器div上应用一个盒子阴影，如下：

My problem is that I would like to apply a box shadow on the container div in the following way:

#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的每一边。然而，在这种情况下，当内容不占据完整高度时，由于模糊，阴影推动通过页脚的底部仍然存在滚动条。

As you can see its a drop shadow on on each side of the container div. However, in doing this, when the content doesn't take up the full height, there are still scroll bars caused by the shadow pushing past the bottom of the footer due to the blur.

有没有一些方法可以防止阴影超过容器div的边缘并导致滚动条？

Is there some way of preventing the shadow from going past the edge of the container div and causing a scrollbar?

感谢您的帮助！

推荐答案

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

Webkit changed its behavior recently as pointed out here: http://archivist.incutio.com/viewlist/css-discuss/109662

确实从今天起，它仍然是Gecko和其他浏览器的问题。

Indeed as of today it is still an issue in Gecko and maybe other browsers.

我设法解决这个棘手的问题

I managed to fix this nasty problem on Gecko using negative margins which also work on all other browsers.

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

Let's assume you have a screen-wide element (E) with box-shadow applied with zero offsets and blur radius R. Let's assume you are dealing with horizontal scrollbar problem because shadow causes element E to relayout with added width.

1. 用帮助包装元素（W）


2. 设置溢出：在W上隐藏


3. 设置填充：R 0 R 0 on W


4. set margin：-R 0 -R 0 on W

1. wrap E with helper wrapper element (W)
2. set overflow:hidden on W
3. set padding: R 0 R 0 on W
4. set margin: -R 0 -R 0 on W

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

The idea is to use overflow hidden to clip out problematic shadows on the left and right. And then use padding+negative margin trick to not clip top and bottom shadows and to keep the box on the same spot in HTML flow.

您可以使用此技术来剪辑出现有问题的阴影框的任意边。

You can adapt this technique to clip out any arbitrary sides of your problematic shadow box.

这篇关于容器div上的CSS盒子阴影导致滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！