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

Triby · #2 (**permalink**) 09/02/2010, 13:36

En www.araudi.net hay algunos ejemplos de pie siempre abajo, analiza el codigo fuente y ahi encontraras la solucion.

Dude-- · #3 (**permalink**) 09/02/2010, 19:05

En primer lugar gracias por la página, veo muchas cosas que me serán útiles.

En segundo decirte que no encuentro ahí la forma de resolver mi problema, ya que es mi pie ("margeninferior") el que debe ocupar el espacio sobrante correspondiente. Para ver si consigo explicarme mejor: Centrándonos en el ejemplo que mencionas, la zona que pone "Pie" con fondo color verde agua debería empezar tras el texto y llegar hasta la parte de abajo de la ventana, sin provocar un incremento de la misma innecesario que por tanto causara la aparición del citado barra de scroll del navegador, es decir (descartando al div "corte") desde el final de "contenido" hasta el final de la página. Vamos que mi problema es que no se porque al asignar height=100% el margeninferior en vez de rellenar el hueco que queda lo amplia...

Recuerdo que cuando maquetaba mediante tablas no había este problema, puesto que creabas una tabla con tres filas, la primera para el cabecero, la segunda para el contenido y la tercera para el pie. En caso de querer replicar lo que pretendo conseguir con CSS solo tenía que indicar que el alto de la última fila era 100% y lo que no ocuparan las dos primeras lo rellenaría esta misma, sin añadir espacio alguno a la página.

Triby · #4 (**permalink**) 09/02/2010, 22:12

Con el doctype que estas usando creo que ni con tablas podrias logar el efecto deseado; en todo caso, te recomiendo recurrir a javascript para detectar el espacio disponible y aplicar la altura necesaria para cubrirlo.

Dude-- · #5 (**permalink**) 09/02/2010, 23:15

Gracias por responder otra vez.

Es lo gracioso de CSS, se supone que debemos usarlo porque es más flexible pero a la hora de la verdad lo que conseguimos es millones de problemas adicionales y cosas sencillas con sistemas antiguos se convierten en incomprensibles y complejas, dado por el bajo soporte que los navegadores hacen de los standares...

¿Pruebo con transicional o ni lo intento?