La sombra del cuadro CSS en el contenedor div provoca barras de desplazamiento

StackOverflow https://stackoverflow.com/questions/2359578

  •  23-09-2019
  •  | 
  •  

Pregunta

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

Utilizo el pie de página claro y un pie de página fuera del contenedor para mantener el pie de página en la parte inferior de la página cuando no hay suficiente contenido.

Mi problema es que me gustaría aplicar una sombra de cuadro 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 puede ver, hay una sombra paralela a cada lado del div contenedor.Sin embargo, al hacer esto, cuando el contenido no ocupa toda la altura, todavía hay barras de desplazamiento causadas por la sombra que pasa por la parte inferior del pie de página debido al desenfoque.

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

¡Gracias por tu ayuda!

¿Fue útil?

Solución

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

De hecho al día 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 el trabajo en todos los demás navegadores.

Supongamos que tiene un elemento de pantalla ancha (E) con box-shadow aplicado los traslados de origen y desenfoque radio de R. Vamos a suponer que se trata de un problema barra de desplazamiento horizontal debido a la sombra provoca elemento E a la redistribución con un ancho añadido.

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

La idea es utilizar el desbordamiento oculta a recortar sombras problemáticas a la izquierda y la derecha. Y luego utilizar el relleno + truco margen negativo de no cortar la parte superior e inferior y sombras para mantener la caja en el mismo punto en el flujo HTML.

Se puede adaptar esta técnica para recortar las partes arbitrarias de la caja de sombra problemática.

Otros consejos

En mi humilde opinión, y de acuerdo con mis pruebas parece que la sombra css en un elemento está aumentando tanto en ancho total y la altura de la página (si el elemento que rodea tiene establecer anchura o la altura a 100%) como usted ha dicho y no he encontrado una solución para este problema css todavía.

Así que tengo una pregunta para usted, ¿Cómo se mantiene el pie de página en la parte inferior de la página? y lo que es el ancho del pie de página tiene?

he tratado con posicionamiento absoluto (ya que estoy acostumbrado a hacerlo 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 un porcentaje como el 90%, pero los restos de problemas ... 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

Espero que esto sea útil

En el elemento padre de #container, añadiendo overflow: visible puede solucionar el problema.

A pesar de que los consejos generales 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 conjunto y en su lugar pie de página con position: absolute y bottom: 0 y dar un #container margin-bottom por lo que no siempre quedan ocultos detrás del pie de página . Si vas por tener el pie en la parte inferior de la ventana sólo tiene que utilizar position: fixed lugar.

Espero que ayuda.

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

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

En el ejemplo anterior algo así como clip: rect(-LARGE_VALUE -LARGE_VALUE auto LARGE_VALUE) sería cortar la sombra en la parte inferior solamente.

Bien sea 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 manera de conseguir esto, ya que es un tema común en el diseño web.

I recurrió al uso de una sombra png, ya que parece ser la única solución sensata.

No estoy seguro si esta es la mejor solución, ya que hay que añadir un div contenedor, pero si se coloca el elemento en un div contenedor y establecer el desbordamiento a escondidas, parece que funciona. Tendrá que de relleno puesto que cada vez que desea que la sombra sea aunque visible.

Yo sé que no es la mejor solución para esto, pero funciona muy bien y me parece que no puede averiguar cualquier otra solución.

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 larga que la pantalla.

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

Por favor, añadir position: relative; en su div sombra, retirar del encabezado, contenido, pie de página. Es un trabajo en mi lado.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top