100% Height with CSS

Posted on | Enero 10, 2007

Encontré un interesante artículo que nos muestra como lograr alturas del 100% en un contenedor/página utilizando CSS.

Although not that widely supported, I have found a way to make 100% height with CSS work in IE, Firefox and Opera. Three of the most major browsers right now. Today, I show you how to accomplish this fun little trick. First we must look at the html and body tags. In CSS’ eyes, these tags are block level elements. Meaning by default that they have a value of auto height and width. Changing these values in your CSS, you can quickly add 100% height to your design.

El CSS:

<style> html, body {margin: 0; padding: 0;} html, body, div {height: 100%;} div {width: 50%; background-color: green; margin: 0px auto 0px; text-align: center; padding: 20px;}</style>

El código en acción aquí!

Comments