Cómo dar height: 100% a un DIV con CSS en Firefox3 e IE7

Charlando con un colega nos ha surgido la duda de cómo podríamos crear un DIV que fuese el wrapper de la página y tuviese el height 100%, de forma que se adapte a la altura del navegador. La solución, que reconozco que hemos tardado en dar con ella, es muy sencilla y se resuelve con unas pocas líneas en el CSS:

html,body{

margin:0px;
height:100%;

}

#wrapper{

height: 100%

}

De todos modos, sigo pensando que dar un height automático al contenedor principal  de una página es antiestético y muchas veces nos encontraremos con problemas al visualizar la página en determinados navegadores. Lo ideal sería poner un height fijo cuando sabemos que la altura de la página nunca va a variar (típicas páginas básicas de empresas con pocos textos).

Etiquetas:,

Suscríbete a nuestro Feed para recibir las últimas novedades de diseño web, diseño gráfico y programación

Entradas relacionadas:

Entradas relacionadas en el blog de N4gashFirefox3 consigue el Record Guiness
Entradas relacionadas en el blog de N4gashVideos de introducción al Social Media Marketing, ¿por qué debe utilizar una empresa las redes sociales?
Entradas relacionadas en el blog de N4gash¿Cómo se hacen los logos de Google (Doodle)?
Entradas relacionadas en el blog de N4gashPacking de los iPod by Microsoft
Entradas relacionadas en el blog de N4gashKinetic Motion Typography,tipografia en movimiento

1 Comentario hasta el momento »

  1. obdc el caminp dijo

    15 de octubre del 2010 a las 16:03

    En cuanto a ello porque no resolverlo con dos div uno que de la altura maxima de la pantalla y otro que contenga el texto, por cierto esto solo funciona con explorer en firefox no funciona para ello es necesario dar una posicion de preferencia relativa:

    html,body{

    margin:0;
    height:100%;

    }

    #wrapper{

    height: 100%;
    position:relative

    }

Comentarios RSS · TrackBack URI

Dejanos tu Comentario

Nombre: (Requerido)

E-Mail: (Requerido)

Sitio WEB:

Comentario:

What is 11 + 12 ?
Please leave these two fields as-is: