Actualización en 2019
TL; DR: Hoy la mejor opción es la última en esta respuesta: flexbox. Todo lo soporta muy bien y lo ha sido durante años. Ve por eso y no mires atrás. El resto de esta respuesta se deja por razones históricas.
El truco es entender de qué se toma el 100%. Leer las especificaciones CSS puede ayudarte allí.
Para abreviar una larga historia, existe el "bloque de contención", que no es necesariamente el elemento padre. Simplemente dicho, es el primer elemento en la jerarquía que tiene posición: relativa o posición: absoluta. O el elemento del cuerpo en sí mismo si no hay nada más. Entonces, cuando dices "ancho: 100%", verifica el ancho del "bloque que contiene" y establece el ancho de tu elemento al mismo tamaño. Si había algo más allí, entonces podría obtener el contenido de un "bloque que contiene" que es más grande que sí mismo (por lo tanto, "desborda").
La altura funciona de la misma manera. Con una excepcion. No puede obtener la altura al 100% de la ventana del navegador. El elemento de nivel más alto, contra el cual se puede calcular el 100%, es el elemento body (o html? No estoy seguro), y se estira lo suficiente como para contener su contenido. Especificar altura: el 100% no tendrá efecto, ya que no tiene un "elemento padre" contra el cual medir el 100%. La ventana en sí misma no cuenta. ;)
Para hacer que algo se extienda exactamente al 100% de la ventana, tiene dos opciones:
- Usar JavaScript
- No uses DOCTYPE. Esta no es una buena práctica, pero pone los navegadores en "modo peculiar", en el que puede hacer height = "100%" en los elementos y los estirará al tamaño de la ventana. Tenga en cuenta que el resto de su página probablemente también tendrá que cambiarse para acomodar los cambios de DOCTYPE.
Actualización: no estoy seguro de si no estaba equivocado cuando publiqué esto, pero esto ciertamente está desactualizado ahora. Hoy puede hacer esto en su hoja de estilo: html, body { height: 100% }y en realidad se extenderá a toda su ventana gráfica. Incluso con un DOCTYPE. min-height: 100%También podría ser útil, dependiendo de su situación.
Y tampoco recomendaría a nadie que haga un documento en modo peculiar ya que causa muchos más dolores de cabeza que los resuelve. Cada navegador tiene un modo de peculiaridades diferente, por lo que hacer que su página se vea de manera consistente en los navegadores se vuelve dos órdenes de magnitud más difícil. Use un DOCTYPE. Siempre. Preferiblemente el HTML5 - <!DOCTYPE html>. Es fácil de recordar y funciona de maravilla en todos los navegadores, incluso los de 10 años.
La única excepción es cuando tienes que soportar algo como IE5 o algo así. Si estás allí, entonces estás solo de todos modos. Esos navegadores antiguos no se parecen en nada a los navegadores de hoy, y los pequeños consejos que se dan aquí lo ayudarán con ellos. En el lado positivo, si estás allí, probablemente solo tengas que admitir UN tipo de navegador, que elimina los problemas de compatibilidad.
¡Buena suerte!
Actualización 2: ¡Hola, ha pasado mucho tiempo! 6 años después, nuevas opciones están en escena. Acabo de tener una discusión en los comentarios a continuación, aquí hay más trucos para usted que funcionan en los navegadores de hoy.
Opción 1 : posicionamiento absoluto. Agradable y limpio para cuando conoces la altura precisa de la primera parte.
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.first-row {position: absolute;top: 0; left: 0; right: 0; height: 100px; background-color: lime;}
.second-row {position: absolute; top: 100px; left: 0; right: 0; bottom: 0; background-color: red }
.second-row iframe {display: block; width: 100%; height: 100%; border: none;}
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<div class="second-row">
<iframe src="https://jsfiddle.net/about"></iframe>
</div>
Algunas notas - la second-rowque se necesita contenedor debido bottom: 0y right: 0no funciona en iframes, por alguna razón. Algo que ver con ser un elemento "reemplazado". Pero width: 100%y height: 100%funciona bien. display: blockes necesario porque es un inlineelemento por defecto y los espacios en blanco comienzan a crear desbordamientos extraños de lo contrario.
Opción 2 - tablas. Funciona cuando no sabes la altura de la primera parte. Puede usar <table>etiquetas reales o hacerlo de la manera más elegante display: table. Iré por lo último porque parece estar de moda en estos días.
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: table; empty-cells: show; border-collapse: collapse; width: 100%; height: 100%;}
.first-row {display: table-row; overflow: auto; background-color: lime;}
.second-row {display: table-row; height: 100%; background-color: red; overflow: hidden }
.second-row iframe {width: 100%; height: 100%; border: none; margin: 0; padding: 0; display: block;}
<div class="row-container">
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<div class="second-row">
<iframe src="https://jsfiddle.net/about"></iframe>
</div>
</div>
Algunas notas: overflow: autose asegura de que la fila siempre incluya todo su contenido. De lo contrario, los elementos flotantes a veces pueden desbordarse. El height: 100%en la segunda fila se asegura de que se expanda tanto como pueda apretando la primera fila lo más pequeño posible.
Opción 3 - flexbox. El más limpio de todos, pero con un soporte de navegador menos que estelar. IE10 necesitará -ms-prefijos para las propiedades de flexbox, y cualquier cosa menos no lo admitirá en absoluto.
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }
<div class="row-container">
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>
Algunas notas: la overflow: hiddencausa es que el iframe todavía genera algún tipo de desbordamiento incluso display: blocken este caso. No es visible en la vista de pantalla completa o en el editor de fragmentos, pero la pequeña ventana de vista previa obtiene una barra de desplazamiento adicional. No tengo idea de qué es eso, los iframes son raros.