CSS box shadow on container div causes scrollbars

Question

I have a website with the following setup:

   

   

           


        
                      

              相关标签:
       
      

Answer 1

Imho, and according to my tests seems that css shadow on an element is increasing both total width and height of the page ( if the surrounding element has width or height set to 100%) as you said and I haven't found a css workaround for this problem yet.

So I've a question for you, how are you keeping your footer at the bottom of the page? and what's the width the footer has?

I've tried with absolute positioning ( as I'm used to do when I want a footer at the bottom of the page) but the problem It's the same with the width, of course you can set the width to a percentage like 90% but the problem remains... here's a snippet that illustrate this simple concept So this isn't a real answer, I've not found a solution for this yet

pastebin

Hope this's useful

Answer 2

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

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.

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. 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

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.

Answer 3

Try adding padding-bottom:8px (shadow height + blur size) to the #container element.