Problemas para lograr height 100%

Gambinoh · #1 (**permalink**) 31/12/2010, 20:49

Hola, tengo una página con un div contenedor con fondo de color azul, tiene un ancho absoluto y un margin: 0 auto; Entiendo que lo anterior significa 0 margen arriba y abajo y auto a los lados.

Dentro de este div tengo otro div con ancho absoluto también, color transparente y alto no definido, digamos que los elementos dentro de él determinarían su alto. Este tiene un margin: 0 auto; también (no se si era necesario ya que en teoría lo heredaría del elemento padre), además tiene un padding-bottom.

La razon de ser del segundo div es crear el efecto de un marco y con la transparencia jugar con fondos con partes transparentes y dar un estilo concreto.

Luego dentro de este div ya están la cabecera, el cuerpo y el pié de página.

PROBLEMA: quiero que el div padre tenga un height del 100% ya que mi página index.html en algunas pantallas por no tener mucho alto puede quedarse corta y el color del body es blanco, mientras que el color del div contenedor es azul. Y no consigo que sea del 100%.

El código xhtml es el siguiente:

Cita:

El código CSS es este:

Cita:

#divcontenedor {background: color url("imagen.jpg") repeat-x; height: 100%; width: 984px; margin: 0 auto; padding-bottom: 11.5px;}

#divsubcontenedor {width: 961px; margin: 0 auto;}

*Detalle: lo que es el contenido, tanto la cabecera, como el cuerpo, como el menú horizontal como el pie de página tienen un alto fijo. Los dos divs contenedores se comportan como un guante digamos, se adaptan al tamaño de lo que contienen respetando los márgenes de los elementos y punto.

Gambinoh · #2 (**permalink**) 31/12/2010, 21:00

Ok resuelto:

Cita:

html,body {margin:0px; height:100%;}

Había que darle también a la etiqueta html height 100%

Gambinoh · #3 (**permalink**) 01/01/2011, 08:09

Vale señores... no puedo más con esto, pruebe lo que pruebe no funciona.

He probado:

Cita:

html,body {margin: 0 auto; height:100%;} y #contenedor {height: 100%;}
/* Se descuadra el último div y la capa contenedor no puede contenerlo no se sabe porque, esto me funciona cuando el div contenedor es menor que la ventana del navegador */

html,body {margin: 0 auto; height:100%;} y #contenedor {height: auto!important;}
/* No completa el espacio de diferencia con la ventana del navegador */

html,body {margin: 0 auto; height:100%;} y #contenedor {height: auto;}
/* Idem*/

html,body {margin: 0 auto; height: auto;} y #contenedor {height: 100%;}
/* Tampoco y se veía venir */

html,body {margin: 0 auto; height: 100%;} y #contenedor {padding-bottom: 100%;}
/* Se duplica el height total de la pantalla y crece innecesariamente, porque toma el 100% del elemento padre que es lo que ocupa el body */

Por favor me conformo con un enlace a un post donde esté resuelto porque esto es demasiado.

PD: Por si no se hubiera entendido lo que intento es solo que cuando la ventana del navegador sea más grande que el div contenedor, este crezca, el motivo es que el fondo de mi body es blanco y el div contenedor azul.

mariomon17 · #4 (**permalink**) 01/01/2011, 11:01

Nose, prueba con
* {margin: 0; padding:0; widht: 100%; height: 100%}

KurozakiIchigo · #5 (**permalink**) 01/01/2011, 11:05

Cita:

background: color url("imagen.jpg")

Tambien aqui andas mal, quita color.

Seria asi:
background: url('imagen.jpg')

y para que IE no te de problemas no pongas seguido repeat-x, ponlo aparte:
background: url('imagen.jpg');
background-repeat: repeat-x;

KurozakiIchigo · #6 (**permalink**) 01/01/2011, 11:14

LISTO!!!
Intenta este codigo:

Código HTML:

Ver original<html>
<head><title>height 100%</title>
<style type="text/css">
* {margin:0; padding:0; border:0;}
html, body {width: auto; height: 100%;}
 
#contenedor {
background-color: #00F;
width: 80%;
height: 100%;
margin: 0 auto;
}
 
/* EL SIGUIENTE CODIGO NO IMPORTA */
#contenido {
font-size: 4em; font-family: 'tahoma', verdana, arial; color: #fff; text-align:center;
}
/* NO IMPORTA OK */
</style></head><body>
 
<div id="contenedor">
    <div id="contenido">CONTENIDO</div>
</div>
 
</body>
</html>

Funciona en: IE, Firefox, Opera, Chrome.

kseso? · #7 (**permalink**) 01/01/2011, 11:43

Gambinoh
De nuevo nos encontramos buscando la estructura cuerpo al 100% y pie abajo, con la posibilidad de que si aumentan los contenidos el pie se desplace. Creo.
Es algo de lo que existen mil y un ejemplos, con diferencias en función de las particularidades de cada caso.
Así, de memoria:
www.araudi.net y css.devillasbuenas.es
Y con una vela y una jaculatoria a google, ya ni le cuento.

Gambinoh · #8 (**permalink**) 01/01/2011, 12:12

Vale creo que he dado con algo que podría ser el problema. Veo que el código html, body {height: 100%} y #contenedor {height: 100%} deberían de funcionar sin problemas... porque en ejemplos de páginas más sencillas funcionan.

EL problema creo que podría ser este, a ver si alguien me lo puede confirmar. Tengo un pie que tiene el siguiente código y la siguiente estructura xhtml:

Cita:

Cita:

#pie {clear: both; width: 961px; height: 80px; background-color: white; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;}

#div_dentro_de_pie {width: 906px; height: 24px; font-size: 12px; background: color url("../imagenes/imagen.jpg") repeat-x; color: color; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; position: relative; margin: auto; top: 14px; padding: 18px 14px 10px 14px;}

Creo que lo que está en negrita podría ser aquello que genera el error. Ya que cuando la página "falla" es con Opera y FIrefox y lo que sucede es que el div blanco de con id pie crece en su width hasta tapar el div contenedor (que es de color azul) por los costados.

kseso? hey echaba de menos tus consejos :P

En realidad la estructura que busco es cuerpo de página con height fijo, pie con height fijo y que lo que crezca sea el contenedor de color azul.

kseso? · #9 (**permalink**) 01/01/2011, 12:29

Échele un vistazo a este ejemplo:
http://css.devillasbuenas.es/pie_abajo2.html
Si no he comprendido mal (recuerde la fecha que es), es la estructura que está buscando:
header (altura fija)+cuerpo+pie (altura fija) ocupando toda la altura de la pantalla cuando el contenido del cuerpo es mínimo
En caso de aumentar el contenido del cuerpo y sobrepasar la altura de la pantalla, crece empujando al pie hacia abajo.

Gambinoh · #10 (**permalink**) 01/01/2011, 13:22

Cita:

Iniciado por kseso?

Échele un vistazo a este ejemplo:
[url]http://css.devillasbuenas.es/pie_abajo2.html[/url]
Si no he comprendido mal (recuerde la fecha que es), es la estructura que está buscando:
header (altura fija)+cuerpo+pie (altura fija) ocupando toda la altura de la pantalla cuando el contenido del cuerpo es mínimo
En caso de aumentar el contenido del cuerpo y sobrepasar la altura de la pantalla, crece empujando al pie hacia abajo.

Ufff creo que nunca me explico bién. A ver en mi opinión las respuestas dadas originalmente tendrían que solucionar el "problema" así que voy voy a estudiar ese pie que es el elemento en discordia.

De todas formas esquematizare para que se entienda:

<div>contenedor de la página
<div>contenido
<div>cabecera</div>
<div>cuerpo</div>
<div>pie<div>contenido por pie</div></div>
</div>

Yo quiero que este div, donde se encuenta este texto (div "contenedor absoluto") crezca si la ventana del navegador resulta ser más alta que el height fijo de la página. Así que lo que pensé es en la propiedad height: 100% para el contenedor absoluto, pero claro, aunque funcionar funciona hay un div con clear: both; que se descuadra.

Ese div que se descuadra es el pie.

</div>

Por cierto impresionante el reloj en CSS.

KurozakiIchigo · #11 (**permalink**) 01/01/2011, 20:48

Gambinoh No logro entenderte.
Lo que quereis lograr es, que si solo hay un renglon de contenido o si hay un millon de renglones de contenido, el contenedor (AZUL) siempre este al 100% en height con el respectivo PIE abajo ???

es esto?

Gambinoh · #12 (**permalink**) 02/01/2011, 06:23

Cita:

Iniciado por KurozakiIchigo

Gambinoh No logro entenderte.
Lo que quereis lograr es, que si solo hay un renglon de contenido o si hay un millon de renglones de contenido, el contenedor (AZUL) siempre este al 100% en height con el respectivo PIE abajo ???

es esto?

Vale me explico, mi página tiene un ancho y un alto fijo independientemente del texto que contenga, ya que el tamaño de letra es en pixels y uso @font-face para importar un tipo de letra determinado. Los propios divs que contienen el texto tienen overflow: hidden.

|----------------------------------------------------------------------------|
| La idea era que si esto es el div supercontenedor..............|
| que hace de borde............................................. ..................|
| |--------------------------------------------------------------|...............|
| | Y este el div con un ancho y alto fijo que..........|...............|
| | permanece siempre estático............................ |...............|
| |................................................. .......................... |...............|
| |................................................. .......................... |...............|
| |................................................. .......................... |...............|
| |................................................. .......................... |...............|
| |................................................. .......................... |...............|
| |................................................. .......................... |...............|
| |................................................. .......................... |...............|
| |................................................. .......................... |...............|
| |................................................. .......................... |...............|
| |--------------------------------------------------------------|...............|
| Esta parte pueda aumentar si la pantalla.............................|
| del PC es mucho mas alta de lo normal...............................|
|-----------------------------------------------------------------------------|

Pero al final he desistido porque es un supuesto que sospecho no va a ser muy habitual.

Gambinoh · #13 (**permalink**) 02/01/2011, 06:39

Por cierto fijaros en el mensaje de arriba de este en como se ve con Firefox, Opera, Chrome y otros...

kseso? · #14 (**permalink**) 04/01/2011, 07:59

Vaya, era eso.
Una estructura con medidas todas fijas (px) excepto el pie que su altura estaría en función del tamaño de la pantalla. ¿sí?

Una caja general de alto 100% (recuerde que el html, body deben tenerlo también declarado) y un fondo y position relative.
Dentro de ella todo lo demás: cabecera con un alto en px y su fondo.
Cuerpo central.
Pie con altura en % (su referente será la caja general) y por lo tanto su tamaño en px vendrá dado por el tamaño de la ventana del navegador, posición absoluta en bottom.

Lo anterior sólo es una idea teórica, no la he pasado a código y mucho menos la he probado.
Posiblemente necesitará alguna cosilla más para afinarlo, y jugar con algún min-height para evitar colapsos y superposiciones a tamaños pequeños.

Una idea parecida, con el tamaño del pie abajo en función del contenido /no tamaño de la ventana/ y creciendo hacia arriba es
http://css.devillasbuenas.es/pie_abajo3.html
Pero sólo fue una realización teórica, sin explorar o investigar a fondo su comportamiento en páginas "reales".

Gambinoh · #15 (**permalink**) 04/01/2011, 15:59

Cita:

Iniciado por kseso?

Vaya, era eso.
Una estructura con medidas todas fijas (px) excepto el pie que su altura estaría en función del tamaño de la pantalla. ¿sí?

Una caja general de alto 100% (recuerde que el html, body deben tenerlo también declarado) y un fondo y position relative.
Dentro de ella todo lo demás: cabecera con un alto en px y su fondo.
Cuerpo central.
Pie con altura en % (su referente será la caja general) y por lo tanto su tamaño en px vendrá dado por el tamaño de la ventana del navegador, posición absoluta en bottom.

Lo anterior sólo es una idea teórica, no la he pasado a código y mucho menos la he probado.
Posiblemente necesitará alguna cosilla más para afinarlo, y jugar con algún min-height para evitar colapsos y superposiciones a tamaños pequeños.

Una idea parecida, con el tamaño del pie abajo en función del contenido /no tamaño de la ventana/ y creciendo hacia arriba es
http://css.devillasbuenas.es/pie_abajo3.html
Pero sólo fue una realización teórica, sin explorar o investigar a fondo su comportamiento en páginas "reales".

Bueno, sí, es parecido a lo que dices y sí, se podía hacer sin problemas, pero yo no conseguí que funcionara en todos los navegadores con los que hago pruebas. Desistí porque me daba problemas el pie que tenía aplicada la propiedad clear: both y tampoco era algo que fuera forzosamente necesario.

En una página simple sin el pie con clear: both todo iba bién.

Gambinoh · #16 (**permalink**) 08/01/2011, 00:54

Kseso? he usado parte del código que me recomendaste mirar a modo de ejemplo y tenías toda la razón... era eso! pero ahora tengo un problemilla.

Primero te presento el código css como ha quedado:

Cita:

html, body {background : white; height: 100%; margin: 0; padding: 0; font: bold 17px Arial, Verdana, sans-serif;}

#super_contenedor {background: blue url("../imagenes/imagen.jpg") repeat-x; min-height: 100%; height: auto !important; height: 100%; width: 984px; margin: 0 auto; position: relative;}

#contenedor {width: 961px; margin: 0 auto; padding-bottom: auto !important;}

Tras lo cual el contenido que hay dentro de contenedor y que tiene un alto y un ancho fijo en px se mantiene como siempre y cuando la ventana del navegador se pone en modo pantalla completa en lugar de verse el color blanco del body, se ve como se prolonga el color "blue" del super_contenedor, ya que el contenedor es transparente.

Ahora el problema es que IE aunque también se comporta igual hace algo que no comprendo. Asigna un espacio extra a ese padding-bottom. En realidad no se si se lo asigna a padding-bottom o al 100% del super_contenedor.

He podido observar que el espacio que se genera como un falso "padding-bottom" en IE es equivalente aproximadamente a la suma de los margenes que existen entre el encabezado, el cuerpo y el pie de mi página.

¿Qué puedo hacer para que en IE se vea igual que en FF, Chrome, Opera, etc.?

kseso? · #17 (**permalink**) 08/01/2011, 08:12

Debería ponerlo en línea y pasar un enlace a su realización para ver y reproducir el problema.
Sin ello, no se puede ver qué propiedades aplican y causan un efecto, ya sea por declaración expresa o por herencia.

Gambinoh · #18 (**permalink**) 08/01/2011, 12:34

Cita:

Iniciado por kseso?

Debería ponerlo en línea y pasar un enlace a su realización para ver y reproducir el problema.
Sin ello, no se puede ver qué propiedades aplican y causan un efecto, ya sea por declaración expresa o por herencia.

Bueno eso no es posible de momento ya que todavía no he publicado la web. Pero le queda poco.

Lo que sí puedo es subir el código XHTML y el CSS que se le aplica a la página.

Yo opino que para IE el heigh es el 100% + los margenes. Porque es evidente que se respeta el tamaño total de la página y luego el padding auto funciona perfectamente.

Cuando la página no llega a completar la ventana de IE el margin auto cubre el sobrante. Cuando la página es más grande que la ventana entonces en lugar de ajustarse al 100% de la página el pádding-bottom es como si tuviera aplicado un min-height. Así que voy a descartar de donde procede y ahora comento.

Antes he dicho que ese extra que ocupaba la zona que sería del margin-bottom era como los margenes verticales sumados, pero existe otra posibilidad y es que sean como la página ocupando toda la ventana del navegador, que reducirse el tamaño de la ventana permanecen como esta estando maximizada.

Gambinoh · #19 (**permalink**) 09/01/2011, 00:00

Cita:

Iniciado por kseso?

[...] o por herencia.

Vale, muchísimas gracias ya está absolutamente solucionado, como bién sugeriste arriba se trataba de un problema de herencia muy muy sencillo que no vi porque en fin, porque todavía me falta leer mucho sobre CSS.

De todas formas lo he logrado gracias a tu ejemplo de http://css.devillasbuenas.es/pie_abajo2.html que me ha salvado.

En fin, no es por hacerte la pelota pero eres una especie de gurú del CSS :D