Problemas con el height: 100%;

pqnova · #1 (**permalink**) 28/07/2008, 07:07

Buenas tardes!!

Tengo un problema.. como no...

Como siempre, me imagino que es básico.. pero es que no le encuentro sentido...

Tengo un cuerpo (body y html) que crece al 100% en height... vale?... pues me pregunto por que al ponerle como height: 100% algun elemento dentro del body no crece hasta el límite del navegador.. si no mucho mas... no entiendo.. es como si tuviera un tamaño muy grande...

En este ejemplo tengo una base de un tamaño en principio fijo.. y quiero ponerle un "relleno" de color o lo que sea bajo el cuerpo principal pero que crezca hasta el límite del navegador.. vamos.. que tenga el height dinámico... pero juer... lo que hace es crecer casi el doble y me pone scroll...

Código:

<!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>
<title>test</title>
<style type="text/css">

html,body {
 text-align: center;
 height: 100%;
}

#cuerpoprincipal {
 width: 800px;
 margin: auto;
 background-color: #ff0000;
 min-height: 402px;
 height: auto !important;	
 height: 402px;
}

#rellenoinferior {
 background-color: #00ff00;
 width: 800px;
 margin: auto;	
 height: 100%;
}

</style>
</head>
<body>
<div id="cuerpoprincipal">
cuerpo principal de la web
</div>
<div id="rellenoinferior">
relleno inferior
</div>
</body>
</html>

Alguien sabe este efecto porque es??

Muchas gracias a todos!

Mikmoro · #2 (**permalink**) 28/07/2008, 07:51

Se produce porque tienes ya una caja que mide 402px como mínimo, y luego, detrás de ella pones otra que mide el 100%. Ese 100% no es el resto hasta abajo, sino relamente el 100%, que sumados a los 402 de la caja superior dan mucho más que el 100% (100% + 402).

Tu quisieras poner un height del "resto de la página", no del 100%, pero eso no se puede marcar sin más con css.

Intenta dibujar exactamente lo que quisieras hacer y vemos si hay una manera de hacerlo. Intenta ser lo más exacto y explícito posible con lo que tienes ahora y lo que querrás poner dentro después, porque en función de esto, una solución poría servir o no, y habría diferentes formas de hacerlo.

pqnova · #3 (**permalink**) 28/07/2008, 09:52

Vaya Mikel!... lo que me has explicado me explica muchas cosas!.. vaya vaya... con que 402px + 100%... vaya tela... así se vuelve uno loco...

Pues voy a ver si te pongo un esquema con dibus y me explico

Muchas gracias (una vez mas

)!!

pqnova · #4 (**permalink**) 28/07/2008, 11:05

Bueno... voy a intentar explicarme.

La situación es la siguiente, necesito un cuerpo fijo en width con un height determinado pero que pueda crecer si lo necesita. Y por cuestiones de diseño, necesito rellenar el espación de "abajo" con un columna que crezca hasta rellenar el resto de la pantalla, tal que asi:

De esta forma, cuando el cuerpo principal azul crece, la masa roja decrece tal que asi:

Espero que los graficos sirvan de explicación

Mil gracias!!

pqnova · #5 (**permalink**) 28/07/2008, 11:23

Vale!! ya lo tengo!!

He metido la masa principal en un contenedor del mismo ancho con un fondo repetido de la columna... y bingo!! cuela

Joder!!! como mola este foro!! solo de postear los problemas te vienen las soluciones!!

Gracias de todas formas Mikel.. lo del 400px+100% me ha ayudado mucho

Mikmoro · #6 (**permalink**) 28/07/2008, 11:34

Me alegro mucho.

Y muy bonito el dibujito

y muy clarita la explicación, como dios manda

Bueno, como ya lo había hecho, otra solución por si te sirve de algo:

Cita:

<!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" >
<head>
<title>pqnova</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0;}
html, body {height: 100%;}
#contenedor {position: relative;
width: 900px;
height: 100%;
margin: 0 auto;
}
.roja {position: absolute;
width: 100px;
height: 100%;
right: 70px;
background-color: red;
}
.azul {position: relative;
min-height: 400px;
height: auto!important;
height: 400px;
background-color: blue;
}
</style>
</head>
<body>
<div id="contenedor">
<div class="roja"></div>

<div class="azul">Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo
</div>
</div>
</body>
</html>

pqnova · #7 (**permalink**) 28/07/2008, 11:46

Eeeeeeh... esta me gusta mas.. no tengo que andar con gif ni backgrounds... mmm.. interesante..

Le metes un absoluto y lo maquetas primero.. rompiendo la maquetación natural del navegador y dejandolo "fijo"... entonces el siguiente div se maqueta normal y "por encima"... ya que es relativo... mmm... vaya vaya... ciertamente estas soluciones te las da la experiencia

Pues me quedo con la tuya!, mas limpia y sencilla

Gracias!! gracias!!

Mikmoro · #8 (**permalink**) 28/07/2008, 11:55

Tiene varias cosas interesantes: empezamos con un contenedor centrado y con posición relativa, para que la absoluta del bloque rojo se coloque con respecto a él. Luego el azul ya no necesita anchura, porque la anchura la marca el contenedor, y el azul ocupa el 100%. El rojo va antes en el flujo porque así se coloca detrás sin hacer nada, aunque podríamos ponerlo después si eso te perjudica para algo y colocarlo detrás con z-index, en previsión de lo cual el bloque azul también tiene posicion relativa, que si no no aceptará el z-index.

En fin, como te decía se podría hacer de varias maneras, y todo está en función de la composición final de los elementos.

Me alegro de que te sirva.

Saludos.

twisterska · #9 (**permalink**) 14/10/2008, 18:42

y si queremos que a demás de que el rojo tenga el height 100%, queremos que este centrado en la pantalla? porque o una cosa o la otra, las 2 no me deja :S

Gracias

Mikmoro · #10 (**permalink**) 15/10/2008, 02:25

No entiendo tu consulta. Explícate mejor a ver qué buscas y si se puede hacer algo.

twisterska · #11 (**permalink**) 15/10/2008, 02:47

Hola, he conseguido la respuesta en este mismo foro al final, jeje

A ver, si ponia al div rojo "positio:absolute"

Código HTML:

.roja {position: absolute;
width: 100px;
height: 100%;
right: 70px;
background-color: red;
}

La posición horizontal del div no era centrada, sino que e 70px derecha, y si ponia a la derecha y la izquierda en "auto" pasaba de mi, no habia manera de centrarlo.

Al final he pasado del div rojo y he hecho el azul al 100% con

Código HTML:

html, body{
height: 100%;
}

y al azul evidentemente ponerle

Código HTML:

.azul{
	width: 900px;
	height: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
}

Mikmoro · #12 (**permalink**) 15/10/2008, 03:56

Ah. pues muy bien.

Saludos.