Foros del Web » Creando para Internet » CSS »

El famoso problema de divs que no crecen 100% en vertical...

Estas en el tema de El famoso problema de divs que no crecen 100% en vertical... en el foro de CSS en Foros del Web. Buenas señores! Llevo ya 1 dia entero perdido con esto y estoy apunto de sacarme las venas y ahorcarme con ellas... He rastreado por google ...
  #1 (permalink)  
Antiguo 13/10/2009, 14:14
 
Fecha de Ingreso: julio-2008
Mensajes: 30
Antigüedad: 9 años, 5 meses
Puntos: 0
El famoso problema de divs que no crecen 100% en vertical...

Buenas señores!

Llevo ya 1 dia entero perdido con esto y estoy apunto de sacarme las venas y ahorcarme con ellas...

He rastreado por google y casi me se ya de memoria las entradas en distintos foros...

El problema es el de siempre y realmente no he encontrado una solución que no sea javascript.

He encontrado el mismo problema pero se pierden en soluciones que no llegan a convencerme...

Os explico.

El tema está en una maquetación líquida que crece dinámicamente en vertical, el contenedor general y el cuerpo de su interior, pues bien, debido al problema que el cuerpo interior desconoce el height de su contenedor general (puesto que es dinámico) no puede crecer debidamente.

Os pongo el ejemplo:

Código:
<html>
<head>
<title> EL PROBLEMA DE SIEMPRE.... </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<style type="text/css">

html,body {height: 100%; width: 100%; text-align: center; background-color: #fff; }

* {margin: 0; padding: 0}

#general { background-color: #efefef; width: 800px; margin: auto; text-align: center; min-height: 100%; height: auto !important; height: 100%;  margin: 0 auto -30px;}

#cabecera {clear: left; background-color: #efefaa; width: 100%; text-align: center; height: 200px;}

#cuerpo {clear: left; width: 100%; background-color: #efaaef; height: 100%;}

#pie { background-color: #aaefef; clear: left; text-align: center; width: 800px; margin: auto;	height: 30px; }

</style>

</head>
<body>

<div id="general">

<div id="cabecera">
Cabecera de 200px fijos (menos mal...) de alto.
</div>

<div id="cuerpo">
Cuerpo que no se expande... 
</div>

</div>

<div id="pie">
	El famoso pie que siempre queda abajo de 30px de alto... y que por cierto... se solapa con el cuerpo, para variar...
</div>

</body>
</html>
Quedaría asi:

img61.imageshack.us/img61/5526/problemadiv100.jpg (no pongo el hache te te pe porque el foro me dice que soy un bot spam )

Lo que quiero en definitiva es que la masa violeta (#cuerpo) crezca dinamicamente hasta ocupar todo el espacio que hay hasta el pie... realmente se puede hacer esto? o simplemente es que soy muy tonto!

Muchas gracias por vuestro tiempo!!
  #2 (permalink)  
Antiguo 13/10/2009, 15:42
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: El famoso problema de divs que no crecen 100% en vertical...

Deja tranquilas tus venas para otra ocasión mejor
Creo que lo que buscas, si no he entendido mal, es una estructura de pie abajo si el contenido es menor que la ventana y en caso de aumentar que el pie descienda. ¿Correcto?
Mira este aporte de Mikmoro en las faq's
Y en su página tiene otros ejemplos: www.araudi.net

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 14/10/2009, 02:15
 
Fecha de Ingreso: julio-2008
Mensajes: 30
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: El famoso problema de divs que no crecen 100% en vertical...

Gracias por la respuesta kseso!! ;)

Ya había añadido a favoritos la página del maese Mikmoro ... que ya me ayudo en el pasado ;)

Pero el problema no es ese, el problema no es que el pie se quede abajo y descienda si el contenido crece, el problema es que quiero que el cuerpo este al 100% pegado al contenido.

En la imagen se ve que el cuerpo (franja violeta) no crece al 100% hasta ajustarse al pié, y como decía según tengo entendido es porque el cuerpo no sabe cual es el 100% de su contenedor puesto que este es dinámico, si el contenedor fuera fijo por ej 600px el cuerpo si sabría crecer hasta esa dimensión...

En resumen es... como crece un div contenido al 100% de su div contenedor cuando éste último es dinámico al 100% de la página?... vaya... diablos! así no me entero ni yo!!

Se ve mejor en la imagen (img61.imageshack.us/img61/5526/problemadiv100.jpg) , el problema es que el cuerpo violeta no se expande a su "contenedor padre" pintado con cuerpo gris hasta llegar al pie.

No se si me explico...
  #4 (permalink)  
Antiguo 14/10/2009, 05:00
Avatar de luckystrikede11  
Fecha de Ingreso: octubre-2009
Ubicación: Concepcion, Chile
Mensajes: 240
Antigüedad: 8 años, 2 meses
Puntos: 17
Respuesta: El famoso problema de divs que no crecen 100% en vertical...

añade:
overflow:hidden en general

clear:both en cuerpo y pie
  #5 (permalink)  
Antiguo 14/10/2009, 06:20
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: El famoso problema de divs que no crecen 100% en vertical...

De verdad, Pqnova, o no he entendido nada o creo que lo que buscas es precisamente el ejemplo de Mikmoro que te enlazaba:
http://www.araudi.net/forosdelweb/pi...re_abajo.html#
Sólo tienes que añadir un color de fondo a #contenedor para que veas que ese div equivale a tu caja rosa (#cuerpo), y la que contiene el texto que tu llamas #cabecera es #contenido en el ejemplo.

Creo que sólo es cuestión de adaptar esa estructura a tus necesidades.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 14/10/2009, 09:30
 
Fecha de Ingreso: julio-2008
Mensajes: 30
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: El famoso problema de divs que no crecen 100% en vertical...

Gracias luckystrikede11 y Keso por vuestro tiempo!

Veras Lucky... lo que propones no funciona...

Keso, es que es muy parecido.. de ahí la confusión.

Voy a explicarlo con el ejemplo de Mikmoro que propones (no repito el link porque el foro no me deja poner urls ... pero es el ejemplo del pie_siempre_abajo.html)

¿Que cambio habría que hacer en la maquetación de Mikmoro para que el div llamado "contenido" creciera al 100% hasta juntarse con el pie independientemente que tenga o no contenido?, es decir, que desde el principio "contenido" ocupe todo el espacio disponible hasta el pie incluso sin texto que lo empuje.

Ese es exactamente mi problema , gracias de nuevo!
  #7 (permalink)  
Antiguo 14/10/2009, 10:00
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: El famoso problema de divs que no crecen 100% en vertical...

Creo que la intención de Mikmoro fue hacer una estructura con su pie abajo (en ausencia de contenidos) y abierta para que se pueda jugar con ella aumentando la estructura y sin tener que modificar su base que lo hace posible.

Si pruebas a pasar el texto de #contenido a #contenedor (eliminando la caja #contenido y colocando un fondo (background) en #contenedor, verás que el ese color se extiende hasta el pie.

#contenido es prescindible para que el pie se mantenga abajo (o dicho de otra forma, para que #contenedor llegue hasta el pie de página)

Espero haberme explicado y que me hayas entendido.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 14/10/2009, 10:09
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: El famoso problema de divs que no crecen 100% en vertical...

De hecho, en el caso concreto del que hablamos (tu dibujo), cambia esto sobre el original:

#contenedor {
min-height:100%;
height: auto!important;
height:100%;
background:#f0aaf0;
}
#contenido {
background:#f0aaf0;
padding: 1em;
}

y verás siempre tu contenido rosa hasta abajo, haya lo que haya de contenido.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 14/10/2009, 11:38
 
Fecha de Ingreso: julio-2008
Mensajes: 30
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: El famoso problema de divs que no crecen 100% en vertical...

Vale vale.. creo que os he confundido con los colores.. perdonad la pérdidad de tiempo ;)

Vamos al ejemplo de Mikmoro.

blackgrain.webcindario.com/css (de nuevo no pongo el hache te te pé )

He puesto borde a todos los divs y he coloreado el div que me interesa ok?

Lo que necesito (y creo que no se puede aunque espero que sea por mi ignorancia) es que el div "contenido" crezca al 100% del espacio que quede hasta el pié.

Tal que así (es un montaje claro! )

img66.imageshack.us/img66/4987/cssloquequieroconseguir.jpg

No os confundais con "contenedor" que evidentemente crece al 100%, lo que necesito es que "contenido" también lo haga aunque no tenga contenido.

¿Lo veis así mas claro?, no sabeis como os agradezco la ayuda!... la verdad es que a menudo no puedo creerme la de horas que pierdo maquetando mientras aun me espera "lo gordo" con la programación... y a menudo me doy cuenta que "lo gordo" es precisamente la maquetación!!
  #10 (permalink)  
Antiguo 14/10/2009, 11:45
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: El famoso problema de divs que no crecen 100% en vertical...

mmm... una cosita: ¿has probado lo que te he dicho?
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 14/10/2009, 11:51
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: El famoso problema de divs que no crecen 100% en vertical...

Edito el código una vez recuperada la conexión porque contenía errores
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 14/10/2009 a las 12:05
  #12 (permalink)  
Antiguo 14/10/2009, 11:53
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: El famoso problema de divs que no crecen 100% en vertical...

Vamos, yo lo decía más que nada por esto

(lo del div "corte" ese que dibujas ya no lo pillo)
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 14/10/2009, 12:02
 
Fecha de Ingreso: julio-2008
Mensajes: 30
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: El famoso problema de divs que no crecen 100% en vertical...

Cita:
Iniciado por Mikmoro Ver Mensaje
mmm... una cosita: ¿has probado lo que te he dicho?
Si Mikmoro! claro, pero es lo que os he comentado, os he liado con el color, olvidaros del color, no necesito que "se vea todo del mismo color", lo que necesito es que el div "contenido" crezca al 100% , y el problema es que teniendo un "contenedor" tambien dinámico al 100% creo que el contenido no puede calcular "cuanto es" el 100% de su padre (contendedor) y por eso no crece ;)
  #14 (permalink)  
Antiguo 14/10/2009, 12:06
 
Fecha de Ingreso: julio-2008
Mensajes: 30
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: El famoso problema de divs que no crecen 100% en vertical...

Cita:
Iniciado por Mikmoro Ver Mensaje
Vamos, yo lo decía más que nada por esto
(lo del div "corte" ese que dibujas ya no lo pillo)
Es lo que te comento antes, no es el color, si no que "contenido" crezca al 100% aun sin contener nada.

El div "corte" está en tu diseño original, me imagino que es para no solapar "contenido" con el "pie" ;)
  #15 (permalink)  
Antiguo 14/10/2009, 12:08
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: El famoso problema de divs que no crecen 100% en vertical...

A estas alturas ya estoy lo suficientemente perdido/confundido como para declararme incompetente y retirarme.

Un saludo y suerte
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #16 (permalink)  
Antiguo 14/10/2009, 12:11
 
Fecha de Ingreso: julio-2008
Mensajes: 30
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: El famoso problema de divs que no crecen 100% en vertical...

Cita:
Iniciado por kseso? Ver Mensaje
Edito el código una vez recuperada la conexión porque contenía errores
Gracias ;) , lo había probado y efectivamente estaba igual... lo importante no es el color, lo importante es que el div llamado "contenido" crezca al 100% aun sin contener nada... ahí está el tema... :(
  #17 (permalink)  
Antiguo 14/10/2009, 12:14
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: El famoso problema de divs que no crecen 100% en vertical...

Pero, ¿qué más te da?. Es decir, si no tiene un fondo ni nada, ¿para qué quieres que el div contenido llegue hasta el final, si no lo vas a ver? ¿hay algo que no has contado de lo que quieres hacer?

P.D.: el div corte está en el original, pero no a la vista, como lo has puesto, que es lo que me ha confundido.
__________________
Visita mi nueva web idplus.org
  #18 (permalink)  
Antiguo 14/10/2009, 12:14
 
Fecha de Ingreso: julio-2008
Mensajes: 30
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: El famoso problema de divs que no crecen 100% en vertical...

Cita:
Iniciado por kseso? Ver Mensaje
A estas alturas ya estoy lo suficientemente perdido/confundido como para declararme incompetente y retirarme.

Un saludo y suerte
Vaya... lo siento Keso, en cualquier caso, muchas gracias por tu ayuda!

Básicamente lo que necesito es que en el diseño de Mikmoro, el div llamado "contenido" crezca al 100% de la pagina contenga o no contenido, el div en sí.

Gracias de todas formas!
  #19 (permalink)  
Antiguo 14/10/2009, 12:24
 
Fecha de Ingreso: julio-2008
Mensajes: 30
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: El famoso problema de divs que no crecen 100% en vertical...

Cita:
Iniciado por Mikmoro Ver Mensaje
Pero, ¿qué más te da?. Es decir, si no tiene un fondo ni nada, ¿para qué quieres que el div contenido llegue hasta el final, si no lo vas a ver? ¿hay algo que no has contado de lo que quieres hacer?
Ah! si claro! claro... no es por capricho.. ojalá pudiera evitarlo...

El tema está en que el div "contenido" va elementos de diseño (como un barra vertical con transparencia) que debe crecer hasta abajo, si el div contenido fuera de un tamaño fijo no tendría problema, pero como toda la web es dinámica tengo el marrón montado.

Algo asi:

img205.imageshack.us/img205/4987/cssloquequieroconseguir.jpg

Claro.. no puedo poner esa barra de fondo de "contenedor" porque no es un tamaño fijo, empieza a cierta altura de cabecera y crece dinámicamente... podría poner solo la transparencia repetiendo solo una porción y luego montar la imagen en "contenido" con posicionamiento .. pero como haría para que empezara el background-repeat de "contenido" a cierta altura de la cabecera??... joder.. es que no es facil...

Si consiguiera que "contenido" crezca dinámicamente al 100% lo tengo solucionado metiendo de fondo la transparencia o un div con las propiedades css y con posicionamiento la imagen por ej.

Esas son mis necesidades.. en resumen, que "contenido" crezca al 100% ...

Se que es lioso y a menudo imposible explicar esto a través de un foro... gracias por intentar entenderme ;)
  #20 (permalink)  
Antiguo 14/10/2009, 12:39
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: El famoso problema de divs que no crecen 100% en vertical...

Eso era de lo primero que hacía falta saber, porque si no, como has visto, ni kseso? ni yo te entendíamos.
Y ya en tu asunto, lo complicado es saber exactamente qué es lo que se persigue, pero con toda exactitud, para encontrar la mejor solución, pero eso seguro que no lo vas a saber más que tú, y difícilmente vas a poder relatar todos todos los detalles.

Por ejemplo: ¿quieres poner una barra de decoración vertical? bien, ¿y no se la puedes poner a #contenedor, que las partes de la cabecera y pie van a quedar ocultas? Quizá haya algo que te lo impida, y así con todas y cada una de las cosas que pudiéramos pensar.
Luego quizá ni siquiera hace falta que el pie quede como está, porque como dices "aunque no haya contenido", pero sin embargo quieres una decoración siempre, lo que quizá se podría resolver poniendo las imágenes de la decoración incrustadas y que obliguen al contenido a crecer, etcétera.
Como ves, tu consulta es algo más difícil que un simple consejo o pedazo de código.

Lo siento.
__________________
Visita mi nueva web idplus.org
  #21 (permalink)  
Antiguo 14/10/2009, 12:47
 
Fecha de Ingreso: julio-2008
Mensajes: 30
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: El famoso problema de divs que no crecen 100% en vertical...

Ya... si teneis razón.. lo único que pensaba es que la razón no era importante puesto que la solución sería que "contenido" creciera al 100% y pensaba que era eso.. alguna propiedad en algún sitio que se me pasaba... pero las cosas como siempre... no son tan sencillas.. si lo fueran no estaría aquí liandola parda!

Mil gracias de todas formas... buscaré la forma de escabullirme de esta...
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 04:31.