Divs 100% height / CSS
Se que el nombre del tema esta muy trillado, y si busco en Google con el mismo nombre me saltan miles de millardos de temas al respecto. Pero luego de investigar mucho y probar por horas y horas no puedo ni encuentro una solución.
Este es el problema, tengo un contenedor con tres divs adentro, un header y dos columnas, ya logré que el contenedor se adapte a los divs con varias soluciones, pero todavía no logro que los divs interiores hagan 100% del contenedor sin que el contenido lo haga.
Todo lo que encuentro sobre esto es con sitios con mucho contenido entonces este problema no existe, con sitio con poco contenido que no rebasan la resolución de la pantalla y que el diseño exige el 100% de la misma.
Para explicarme mejor esto es lo que me queda:
http://www.grmn.ws/images/css.jpg
Y esto es lo que quiero:
http://www.grmn.ws/images/css_final.jpg
Encontré en Metalize algunas soluciones, como la de los fondos de colores o el padding eterno - el margin eterno, pero quiero saber si existe alguna solución o no.
Muchas gracias.-
Usuario desconocido
me pasaron este enlace: http://blog.corunet.com/english/three-column-layout-with-full-page-height
es tal cual lo que quiero hacer yo, pero no me convence lo de utilizar javascript... pq si el navegador lo bloquea podría no verse bien, no?
Amatulo
grmn
Amatulo:
Bien, funcionó para cuando tengo menos texto que la resolución de pantalla, pero cuando el texto rebasa este tamaño el footer se queda en el lugar y no baja... puede ser??
Gracias, por la ayuda y seguiremos buscando.
Saludos.
Si. Es la putada de tener que ponerlo en absolute. El footer siempre quedará en la parte de abajo del navegador. Por mucho que se escale. La movida es que si se pone relative quedaría flotando por debajo de las 2 columnas y se perdería en esos 30000px. He probado también tirando de z-index y no me hace ni caso. Esta es la única forma que se me ocurre para éste caso concreto.
cbp
por si a alguien le puede servir, hay 3 maneras de hacer que un contenedor que únicamente contiene elementos flotados los englobe:
1. dándole un "height"
2. flotándolo
3. dándole un "width" y un "overflow: hidden" (el width es necesario para el IE)
en función de las necesidades de cada caso se puede elegir una forma u otra
grmn
Amatulo:
Bien, funcionó para cuando tengo menos texto que la resolución de pantalla, pero cuando el texto rebasa este tamaño el footer se queda en el lugar y no baja... puede ser??
Gracias, por la ayuda y seguiremos buscando.
Saludos.
Amatulo
grmn
...el problema es que no puedes usar footer.
Anda pues yo si que he conseguido poner un footer y de momento chuta en Firefox y en IE6, IE7. No lo he probado en el resto pero os pego el CSS del footer, que es el único que modifiqué por si sirve de algo...
#footer {
width:705px;
height:20px;
background-color:#CCC;
position:absolute;
bottom:0;
clear:both;
}
demssite
Con este mismo tema estuvimos en un post no hace mucho y al final no llegamos a ninguna solución.... A ver si se nos ocurre algo
grmn
No, no he podido.
He sacado algunas teorías al respecto. Que si son divs que flotan es lógico que no tomen el 100% de su contenedor y se aferren a un valor fijo, que es la resolución, no se, tal vez me equivoque.
Por lo pronto estoy usando el padding - el margin y listo, pero el problema es que no puedes usar footer.
Para lo otro ejemplo, cuando tenemos footer y todo lo demás, recurro a las queridas tablas que nunca fallan.
Saludos,
Usuario desconocido
has podido solucionar el tema? tengo el mismo problema o muy parecido, y ya no se que hacer
grmn
mmmm, no se si esa solución es la mejor, por que no funciona muy bien... a mi en IE6 y el <em>contenedor</em> con <em>overflow:hidden</em> no me funciona, como lo dice la propiedades me esconde todo y además si existe un <em>footer</em> lo elimina.
En IE7 y FF funciona bien....
Pero no se, seguiremos buscando.
Saludos,
Amatulo
Nada. Al final la mejor solución va a ser la de:
padding-bottom:tropecientospx;
margin-bottom:-tropecientospx;
En fin, aunque no sea lo "correcto", al menos existe una forma sencilla de hacerlo.
La pregunta es si la web validaría con márgenes negativos en el CSS.
grmn
Jejeje!
No, no vale, ni eso, ni el padding de 30000px - margin de -30000px ni el JS, me parece bueno que salga solo con CSS.
Esperemos solucionarlo, igual se me estuvo ocurriendo algo que no sería equivocado que no funcione. Luego se los comento.
Saludos y gracias por prenderse en esto.
Amatulo
Me habéis picao!! Voy a probar yo también!
Por cierto, la opción de poner una imagen de fondo del body con un repeat-y no te vale no?
grmn
MMM, no me ha funcionado, te dejo los archivos para que los revises por si tiene errores.
Html:
http://www.grmn.ws/DMSTK/lalala.html
CSS:
http://www.grmn.ws/DMSTK/lala.css
En los casos de IE7 y FF pasa que no se estiran, y para IE6 pasa lo que comente en los post anteriores el <em>height</em> es el de la resolución y no el del contenedor.
Se que existe un JS que permite el 100% viendo el tamaño de la div más grande y llevando a las otras a esa altura, pero creo que sería bueno ver una solución solo con el CSS.
Gracias!
Usuario desconocido
Una solución fàcil y clara.
El funcionamiento del Height como propiedad, se basa en la dependencia de los atributos, si les pones una classe height a un contenedor, pero no has definido la altura en el contenedor padre, no se apllicará correctamente.
<ul>
definir la propiedad height:100% en la clase html,body{}
y aplicar las siguientes propiedades al contenedor y divs contenidos.
height:auto !important; /* real browsers */
height:100%; /* IE6*/
min-height:100%; /* real browsers */
</ul>
A ver que te parece.
Saludos.
orange
El utilizar posicionamientos absolutos nada tiene que ver con centrar o no el DIV, de hecho puedes hacerlo manejando márgenes negativos.
De lo del 100%, también tienes ejemplos en el foro: http://www.google.com/search?hl=es&q=height+100%25+site%3Awww.domestika.org&btnG=Buscar&lr=
;)
Para empezar te falta definirle propiedades al elemento HTML:
<code>html, body { height:100%; min-height: 100%; }</code>
grmn
El ejemplo que coloque utilizo min-height, puedes verlo en los post anteriores.
Si puedes revisarlo, tal vez encuentres algún error.
Gracias.
orange
min-height
;)
Hay muchos hilos al respecto: http://www.google.com/search?q=min-height+site%3Awww.domestika.org&ie=utf-8&oe=utf-8&aq=t
grmn
Bueno, recién hice un post donde dije que encontré la solución! y lo borré!
Y si es verdad, la encontré para el ejemplo que yo quería, aquí lo pueden ver http://www.grmn.ws/DMSTK/domestika.html.
Y esto me hizo sacar una resolución (que tal vez Uds ya lo sabían) que es que el 100% height de los DIVs internos son sobre la resolución de pantalla (que es fijo) y no de la DIV que lo contiene por lo tanto para el ejemplo que yo manejaba es correcto, un sitio donde el contenido no es mayor al valor height de la resolución.
Pero para cuando el contenido rebasa este valor los DIVs no se mueven, ya que el 100% es un valor fijo y ahí esta el problema.
Espero comentarios.
grmn
Bien.. encontré porque funciona el div del menú el de la izquierda, tiene como <code>position:absolute</code> entonces al ponerle a la de la derecha la misma propiedad funcionó! pero el problema es que no se puede alinear todo al centro por tener esta propiedad.
Les pego el CSS general:
<code>
body {
font-size: x-small;
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
}
#contenedor {
background-color: #CCCCCC;
position: absolute;
margin:0;
width: 100%;
min-height: 100%;
}
#menu {
background-color: #EEE;
width: 150px;
position: absolute;
left: 0px;
top: 0px;
height: 100%;
min-height: 100%;
}
#contenido {
background-color: #D9E8FF;
margin-left: 160px;
width: 44.7em;
position: absolute;
height: 100%;
min-height: 100%;
}
</code>
Sigo, probando cualquier cosa aviso.
Saludos,
demssite
Buenas, esa prueba aún no lo habíamos solucionado y como es una web de la family la tenía un poco dejado de lado, pero si que estaría bien ver si lo solucionamos. ;)
grmn
Bien, gracias por contestar.
Pero me paso esto, para IE7 y FF:
http://www.grmn.ws/images/css_IE7_FF.jpg
Y para IE6 funciona bien, conseguí ponerle el CSS para IE6 que habían hecho y funciona correctamente.
El problema reside cuando el contenido es menor a la resolución de la pantalla, como muestro en los ejemplos el div celeste no crece el 100% del contenedor, si funciona para el div de la izq, el menú, pero no encontré diferencias con el de la derecha.
Para la próxima si puedes poner las urls de los css te lo agradezco, puede ser que el error sea que uno de los CSS no lo he encontrado, pero fijate que sucede si le quitas texto de la derecha, menos que la resolución.
Saludos,
Usuario desconocido
Mírate la CSS de este link. Creo que conseguimos que saliera bien en todos los navegadores. Seguro que te sirve apañándolo a lo que tu quieres
http://www.punisha.com/domestika/altura100/altura100.htm