CSS caja de sombra en el contenedor div provoca barras de desplazamiento

Question

que tienen un sitio web con la siguiente configuración:

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

uso el clearfooter y un pie fuera del contenedor para mantener el pie en la parte inferior de la página cuando no ISN no suficiente contenido

Mi problema es que me gustaría aplicar una sombra caja en el div contenedor de la siguiente manera:

#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;} 

Como se puede ver es una sombra sobre cada lado del contenedor div. Sin embargo, al hacer esto, cuando el contenido no ocupa toda la altura, todavía hay barras de desplazamiento causadas por la sombra que empuja más allá de la parte inferior del pie de página debido a la falta de definición.

¿Hay alguna manera de evitar que la sombra pase el borde del contenedor div y provoque una barra de desplazamiento?

Gracias por su ayuda!

Answer 1

Webkit cambió su comportamiento reciente como señaló aquí: http://archivist.incutio.com/viewlist/css-discuss/109662

hecho a partir de hoy sigue siendo un problema en Gecko y tal vez otros navegadores.

---

me las arreglé para solucionar este problema desagradable en Gecko utilizando márgenes negativos que también trabajan en todos los demás navegadores.

Supongamos que tiene un elemento de pantalla (E) con sombreado de caja aplicado con compensaciones cero y radio de desenfoque R. Supongamos que se trata de un problema de barra de desplazamiento horizontal porque la sombra hace que el elemento E se retransmita con un ancho adicional.

1. envoltura E con elemento de ayuda envoltorio (W)
2. conjunto overflow: hidden en W
acolchado
3. conjunto: R R 0 0 W en el margen
4. conjunto: -R 0 0 -R en W

La idea es utilizar el desbordamiento oculto para recortar las sombras problemáticas de la izquierda y la derecha. Y luego use relleno + truco de margen negativo para no recortar las sombras superiores e inferiores y mantener la caja en el mismo lugar en el flujo de HTML.

Puede adaptar esta técnica para recortar cualquier lado arbitrario de su cuadro de sombras problemático.

Answer 2

Imho, y de acuerdo con mis pruebas parece que la sombra css en un elemento está aumentando tanto el ancho total como la altura de la página (si el elemento circundante tiene ancho o alto establecidos en 100%) como dijiste y yo no encontró una solución CSS para este problema todavía.

Así que tengo una pregunta para usted, ¿cómo está manteniendo su pie de página en la parte inferior de la página? y cuál es el ancho que tiene el pie de página?

He intentado con el posicionamiento absoluto (como solía hacer cuando quiero un pie de página en la parte inferior de la página) pero el problema Es el mismo con el ancho, por supuesto puede establecer el ancho a porcentaje como el 90%, pero el problema sigue siendo ... he aquí un fragmento que ilustra este concepto simple Así que esto no es una respuesta real, no he encontrado una solución para esto todavía

pastebin

esperanza esto es útil

Answer 3

En el elemento primario de #container, agregando overflow: visible puede solucionar el problema.

Aunque consejo general para el pie de página en la parte inferior, es posible que desee olvidar su lugar sobre la configuración de la min-height en #container y en su lugar establecer pie de página con position: absolute y bottom: 0 y darle un #containermargin-bottom por lo que no siempre quedan ocultos detrás de la pie de página. Si va a tener el pie de página en la parte inferior de la ventana, simplemente use position: fixed.

Espero que ayude.

Answer 4

Bueno, o bien la solución a este problema es muy oscura o no hay una solución con la tecnología actual. Es realmente una lástima que no hay forma de lograr esto, ya que es un tema común en el diseño web.

Recurrí a usar una sombra png ya que parece ser la única solución razonable.

Answer 5

No estoy seguro si esta es la mejor solución ya que tiene que agregar un contenedor div, pero si envuelve el elemento en un contenedor div y establece el desbordamiento en oculto, parece que funciona. Sin embargo, tendrás que configurar el relleno donde quieras que esté la sombra.

Sé que no es la mejor solución para esto, pero funciona bien y parece que no puedo encontrar ninguna otra solución.

Answer 6

Trate de añadir padding-bottom: 8px (tamaño de sombra altura + desenfoque) a la elemento #container.

Answer 7

Mejor solución para mí, al menos, ya que no implica ningún elemento de envolver, es colocar un rectángulo de recorte en el elemento con la sombra.

En el ejemplo anterior, algo como clip: rect(-LARGE_VALUE -LARGE_VALUE auto LARGE_VALUE) recortaría la sombra paralela solo en la parte inferior.

Answer 8

Tengo un div que es 100% de altura (es decir altura completa en la pantalla) y había una caja-sombra:
box-shadow: 0 0 10px rgba(0,0,0,0.4);

Esto estaba causando que aparezcan las barras de desplazamiento, a pesar de que el contenido no era más largo que la pantalla

Todo lo que hice fue establecer un desplazamiento vertical negativo: box-shadow: 0 -10px 10px rgba(0,0,0,0.4); y eso lo resolvió.

Answer 9

Agregue position: relative; en su div shadow, quítelo del encabezado, contenido, pie de página. Es trabajo en mi lado.