Foros del Web - Ver Mensaje Individual - Div height 100% que causa scroll indeseado

Dude-- · #1 (**permalink**) 09/02/2010, 13:19

El elemento "margeninferior" cumple la función de ocultar el espacio sobrante de la ventana ocupado por la imagen relleno.jpg que se repite verticalmente a lo largo de toda la página (background del BODY) y de hecho lo hace, pero aunque la página no ocupa más de lo que muestra el navegador en pantalla como para que aparezca el scroll del mismo, al estar en 100% el "margeninferior" añade espacio por debajo del resto del contenido, haciendo que aparezca el scroll del navegador... lo cual no tiene mucho sentido, ya que en teoría lo que debería hacer es "rellenar" el espacio sobrante desde que termina el elemento "pie" hasta el final de la ventana...

Código HTML:

Ver original<!-- [R] Quirks mode de IE --> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
    <head> 
        
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
            
        <meta http-equiv="content-language" content="es" /> <!-- Compatibilidad retroactiva con navegadores antiguos --> 
        
        <link href="basic.css" rel="stylesheet" type="text/css" media="screen" />
    
        <title></title> 
    </head>
<body>
 
<div id="principal">
     <div id="contenido">Prueba<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />10</div>
     <div id="pie"></div>
     <div id="margeninferior"></div>        
</div>
 
</body>
</html>

Código CSS:

Ver original[
BODY 
{
    margin: 0px; 
    padding: 0px;
    border: 0px;
    
    font-family:Arial, Helvetica, sans-serif;   
    line-height:18px;
    font-size:12px;
    color: #06185c; 
 
    background: #1e0000 url(img/relleno.jpg) repeat-y top center;
    
    text-align:center; /*Para centrar contenido con IE7, vaya mierda de navegador ¬_¬*/
}
 
#principal
{
    position: static;
    margin: 0px;
    padding: 250px 0px 0px 0px;
    border: 0px;
    background: url(img/fondo.jpg) no-repeat top center;
    height: 557px;
}
 
#contenido
{
    text-align:left;
    position: static;
    background:#FF00FF;
    width: 850px;
    margin: auto;
    padding: 0px;
    border: 0px;
}
 
#pie
{
    position: static;
    margin: auto;
    padding: 0px;
    border: 0px;
    background: #1e0000 url(img/pie.jpg) no-repeat top center;
    height: 34px;
    width: 968px;
}
 
#margeninferior
{
    position: static;
    margin: auto;
    padding: 0px;
    border: 0px;
    background: #1e0000;
    height: 100%;
    width: 970px;
}