Problema box-shadow en body al hacer scroll me dirijo a vosotros con el fin de pedirles ayuda acerca de un problema que tengo con la propiedad "box-shadow" aplicada al body que, a la hora de hacer más pequeña la ventana del navegador para forzar la salida de las barras laterales de scroll vertical, me genera un espacio sin dicho efecto en la parte inferior cuando hago scroll para ver el footer.
Os dejo unas capturas para que lo veais con más claridad:
Este es el layout completo con el efecto "box-shadow" inset aplicado al body:
Ahora acorto el navegador en altura para que aparezcan las barras de scroll vertical:
y cuando hago scroll para ver la parte inferior, el footer, me genera un espacio sin el efecto "box shadow"...
He rebuscado en internet y no he encontrado nada que pueda solucionar este efecto, en verdad encontré una solución pero sacrificando el "layout 100% height", o lo que es lo mismo, sacrificando que el layout de la web ocupe siempre el 100% del alto de la ventana a la hora de hacerla más pequeña o más grande y que el footer siempre este "pegado" abajo.
Agradezco muchísimo cualquier aportación a la solución de este problema que tengo.
A continuación os dejo el código HTML y el CSS en cuestión.
Muchas gracias.
el HTML:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>CSS Layout - 100% height</title> <link rel="stylesheet" type="text/css" href="css/layout1.css" /> </head> <body> <div id="container"> <div id="header"> <h1>CSS layout: 100% height with header and footer</h1> <p>Sometimes things that used to be really simple with tables can still appear pretty hard with CSS. This layout for instance would consist of 3 cells; two with a fixed height, and a third one in the center filling up the remaining space. Using CSS, however, you have to take a different approach.</p> </div> <div id="content"> <h2>Min-height</h2> <p> The #container element of this page has a min-height of 100%. That way, if the content requires more height than the viewport provides, the height of #content forces #container to become longer as well. Possible columns in #content can then be visualised with a background image on #container; divs are not table cells, and you don't need (or want) the fysical elements to create such a visual effect. If you're not yet convinced; think wobbly lines and gradients instead of straight lines and simple color schemes. </p> <h2>Relative positioning</h2> <p> Because #container has a relative position, #footer will always remain at its bottom; since the min-height mentioned above does not prevent #container from scaling, this will work even if (or rather especially when) #content forces #container to become longer. </p> <h2>Padding-bottom</h2> <p> Since it is no longer in the normal flow, padding-bottom of #content now provides the space for the absolute #footer. This padding is included in the scrolled height by default, so that the footer will never overlap the above content. </p> <p> Scale the text size a bit or resize your browser window to test this layout. The <a href="css/layout1.css">CSS file is over here</a>. </p> <p> <a href="../css.html">Back to CSS Examples</a> </p> </div> <div id="footer"> <p> This footer is absolutely positioned to bottom:0; of #container. The padding-bottom of #content keeps me from overlapping it when the page is longer than the viewport. </p> </div> </div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> <script type="text/javascript"> _uacct = "UA-472607-1"; urchinTracker(); </script> </body>
Código HTML:
/**
* 100% height layout with header and footer
* ----------------------------------------------
* Feel free to copy/use/change/improve
*/
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background: gray;
font-family:arial,sans-serif;
font-size:small;
color:#666;
-webkit-box-shadow: inset 0 0 200px 230px rgba(0,0,0,0.7);
-moz-box-shadow: inset 0 0 200px 230px rgba(0,0,0,0.7);
box-shadow: inset 0 0 200px 190px rgba(0,0,0,0.7);
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:orange;
}
p {
line-height:1.5;
margin:0 0 1em;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:750px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
padding:1em;
background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#header p {
font-style:italic;
font-size:1.1em;
margin:0;
}
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align:justify;
padding:0 1em;
}
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
}
div#footer p {
padding:1em;
margin:0;
}
