Foros del Web » Creando para Internet » CSS »

Problema con divs misma altura junto a pie siempre abajo

Estas en el tema de Problema con divs misma altura junto a pie siempre abajo en el foro de CSS en Foros del Web. Hola: Estoy intentando maquetar con css una web con un menú a la izquierda de la página, desde arriba hasta abajo del total de la ...
  #1 (permalink)  
Antiguo 20/01/2011, 04:48
Avatar de pangeacb  
Fecha de Ingreso: mayo-2009
Mensajes: 30
Antigüedad: 14 años, 11 meses
Puntos: 0
Pregunta Problema con divs misma altura junto a pie siempre abajo

Hola:
Estoy intentando maquetar con css una web con un menú a la izquierda de la página, desde arriba hasta abajo del total de la misma, y ese menú lleva una imagen de fondo de una altura determinada, que no se repite, y cuando la imagen finaliza, continua con un color hasta el final.
Ésto no es ningún problema, porque juego con el borde izquierdo de una capa, junto con el fondo de otra capa superior con margen negativo, y pongo el height de las capas en auto, y llega hasta el fina de la página sin ningún problema
El problema me surge cuando el contenido no llena la pantalla, y tengo que poner el pie abajo de la misma. El método que yo conozco consiste en poner un div de corte con both:clear, y el height de la capa contenedora al 100% para que llene toda la pantalla, y el pie, que está fuera de la contenedora ,se ve empujado fuera de la pantalla, y con un margen negativo lo colocamos dentro de la misma.
Bueno, pues los dos métodos juntos no funcionan. O pongo el pie abajo en la pantalla vacía, o llevo el fondo del menú hasta el final de la página, cuando el contenido es grande.
Ruego que alguien me ayude, porque llevo 2 días dando palos de ciego.
Gracias de antemano, y un saludo.
  #2 (permalink)  
Antiguo 22/01/2011, 08:22
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 3 meses
Puntos: 36
Respuesta: Problema con divs misma altura junto a pie siempre abajo

Una solución general que seguro que puedes adaptar. Utiliza una capa fija para los fondos que ocupa toda la pantalla.

<head><style type="text/css">
body{ /* aqui pueden ir fondos para los márgenes*/
margin:0;
}
#fondo-pagina{ /* Un fondo estático para el contenido de la página se incluye para */
/* permitir composiciones complicadas mediante divs, transparencias, etc.*/
background-color: #6600FF;
left: 20%;
height: 100%;
position: fixed;
top: 0;
width: 60%; /* dándole un 100% se pueden incluir aquí los márgenes en lugar de en body*/
min-width:450px; /* el ancho mínimo que quieras para que las columnas se muestren */
/* siempre una al lado de la otra y no desaparezca una de ellas */
}
#fondo-menu { /* aqui pueden ir fondos estáticos para el menu */
background-color:#C06;
left:10px; /* El margen izquierdo de fondo-menu */
width:200px;
bottom: 0px;
top:0;
height:auto;
position:absolute;
/* las cuatro propiedades anteriores garantizan */
/* que el fondo del menu ocupe toda la pantalla */
}
#wrap { /* coincide exactamente sobre la capa que contiene al fondo */
/* debe ser transparente */
min-height: 100%;
position: absolute;
left: 20%;
top: 0;
width: 60%;
background: none; /* Se debe ver el fondo, aunque admite transparencias */
}
#menu{ /* aquí pueden ir fondos para el menu que se muevan con la página*/
margin-left:10px; /* El margen izquierdo de fondo-menu */
margin-right:10px; /* separación del contenido */
background-color:#99C;
margin-bottom: 30px; /* alto del pie */
width:200px;
float:left;
}
#contenido{ /* aquí pueden ir fondos para el contenido que se mueven con la página */
margin-right:10px; /* separación del contenedor */
background-color:#99C;
margin-bottom: 30px; /* alto del pie */
float:left;
}
#pie{
position:absolute;
width:100%;
background-color: #555500;
bottom: 0;
height: 30px;
left: 0;
}
.clearfix{
clear:both;
height:0;
}
</style></head>

<body>
<div id="fondo-pagina">
<div id="fondo-menu"></div>
</div>
<div id="wrap">
<div id="menu">
<p>Algo de relleno<br>para que se muestre el div</p>
<p>¿Un menú <br />más alto <br/>que el <br/>contenido?</p>
<p>Sin problema</p>
</div>
<div id="contenido">
<p><br/>Algo de contenido<br/><br/></p>
<p>Más contenido</p>
</div>
<div class="clearfix"></div>
<div id="pie"></div>
</div>
</body>

Etiquetas: abajo, altura, columnas, pie, siempre
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:10.