Foros del Web » Creando para Internet » CSS »

Problemas con el height: 100%;

Estas en el tema de Problemas con el height: 100%; en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/07/2008, 08:07
 
Fecha de Ingreso: julio-2008
Mensajes: 30
Antigüedad: 9 años, 4 meses
Puntos: 0
Problemas con el height: 100%;

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!
  #2 (permalink)  
Antiguo 28/07/2008, 08:51
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas con el height: 100%;

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.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 28/07/2008, 10:52
 
Fecha de Ingreso: julio-2008
Mensajes: 30
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Problemas con el height: 100%;

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 )!!
  #4 (permalink)  
Antiguo 28/07/2008, 12:05
 
Fecha de Ingreso: julio-2008
Mensajes: 30
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Problemas con el height: 100%;

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!!
  #5 (permalink)  
Antiguo 28/07/2008, 12:23
 
Fecha de Ingreso: julio-2008
Mensajes: 30
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Problemas con el height: 100%;

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
  #6 (permalink)  
Antiguo 28/07/2008, 12:34
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas con el height: 100%;

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>
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 28/07/2008, 12:46
 
Fecha de Ingreso: julio-2008
Mensajes: 30
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Problemas con el height: 100%;

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!!
  #8 (permalink)  
Antiguo 28/07/2008, 12:55
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas con el height: 100%;

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.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 14/10/2008, 19:42
Avatar de twisterska  
Fecha de Ingreso: agosto-2008
Mensajes: 51
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Problemas con el height: 100%;

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
  #10 (permalink)  
Antiguo 15/10/2008, 03:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas con el height: 100%;

No entiendo tu consulta. Explícate mejor a ver qué buscas y si se puede hacer algo.
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 15/10/2008, 03:47
Avatar de twisterska  
Fecha de Ingreso: agosto-2008
Mensajes: 51
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Problemas con el height: 100%;

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;
}
  #12 (permalink)  
Antiguo 15/10/2008, 04:56
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas con el height: 100%;

Ah. pues muy bien.

Saludos.
__________________
Visita mi nueva web idplus.org
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 15:03.