CSS box shadow on container div causes scrollbars

Question

I have a website with the following setup:

   

   

           


        
                      

              相关标签:
       
      

Answer 1

On the parent element of #container, adding overflow: visible may fix the problem.

Though as general advice for the footer at the bottom, you may want to instead forget about setting the min-height on #container and instead set footer with position: absolute and bottom: 0 and give #container a margin-bottom so it doesn't ever get hidden behind the footer. If you're going for having the footer at the bottom of the window just use position: fixed instead.

Hope it helps.

Answer 2

Please add position: relative; in your shadow div, remove from header, content, footer. It's work in my side.

Answer 3

Well either the solution to this problem is very obscure or there is not a solution with the current technology. Its really too bad there is no way of accomplishing this as it is a common theme in web design.

I resorted to using a png shadow as it seems to be the only sane solution.

Answer 4

Better solution for me at least, since it involves no wrapping element, is to place a clipping rectangle on the element with the shadow.

In the example above something like clip: rect(-LARGE_VALUE -LARGE_VALUE auto LARGE_VALUE) would clip the drop shadow on the bottom only.

Answer 5

I have a div that is 100% height (ie full height on screen) and there was a box-shadow:
box-shadow: 0 0 10px rgba(0,0,0,0.4);

This was causing the scroll bars to appear, even though content was not longer than the screen.

All I did was to set a negative vertical offset: box-shadow: 0 -10px 10px rgba(0,0,0,0.4); and that solved it.

Answer 6

Not sure if this is the best solution as you have to add a container div, but if you wrap the element in a container div and set the overflow to hidden, it seems to work. You'll have to set padding where ever you want the shadow to be visible though.

I know it's not the best solution to this, but it works fine and I can't seem to figure out any other solution.