¿Cómo hacer que un DIV llene el espacio vertical restante de la ventana del navegador?

Question

tengo este código simplificado:

This is a line of text<br/> 
<div style="background-color: orange; height: 100%">And this is a div</div> 

La altura div termina siendo 100% de la altura del espacio de cliente de la ventana del navegador, que resumió con la altura de la línea de texto, es más que la altura de la ventana , entonces tienes que desplazarte.

¿Cómo puedo hacer la altura del div para que tome la altura de la ventana del navegador menos la línea de texto?

O, en otras palabras, ¿cómo puedo hacer que el div tome todo el espacio libre verticalmente con respecto a lo que otros objetos DOM ya ocupan?

Answer 1

En última instancia, querrá tener un contenedor. "desbordamiento: oculto" ocultará todo lo que desborde el contenedor. Si no usáramos eso, veríamos el problema mencionado anteriormente sobre "... es más que la altura de la ventana, por lo que debe desplazarse".

<div id="container" style="color:white;height:500px;background-color:black;overflow:hidden;"> 
    This is the container 
    <div style="height:100%;background-color:orange;"> 
     This div should take the rest of the height (of the container). 
    </div> 
    </div> 

Ejemplo con rebosadero oculto: http://jsbin.com/oxico5

Ejemplo sin rebosadero oculto: http://jsbin.com/otaru5/2

Answer 2

me encontré con el mismo problema también. Aquí está la solución que encontré:

<style> 
.container{ 
    position: relative; 
    height: 100%; 
} 
.top-div{ 
    /* height can be here. if you want it*/ 
} 
.content{ 
    position:absolute; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    top: 1em; /* or whatever height of upper div*/ 
    background: red; 
} 
</style> 
<div class="container"> 
    <div class="top-div">This is a line of text</div> 
    <div class="content">And this is a div</div> 
</div> 

fuente - http://www.codingforums.com/archive/index.php/t-142757.html

Answer 3

Esto se puede hacer muy elegantemente usando display: table; sin necesidad de conocer ningún valores de altura explícitos.

demo aquí: http://codepen.io/shanomurphy/pen/jbPMLX

html, body { 
    height: 100%; // required to make .layout 100% height 
} 

.layout { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 

.layout__row { 
    display: table-row; 
} 

.layout__cell { 
    display: table-cell; 
    vertical-align: middle; 
} 

.layout__cell--last { 
    height: 100%; // force fill remaining vertical space 
} 

<div class="layout"> 
    <div class="layout__row"> 
    <div class="layout__cell"> 
     Row 1 content 
    </div> 
    </div> 
    <div class="layout__row"> 
    <div class="layout__cell layout__cell--last"> 
     Row 2 fills remaining vertical space. 
    </div> 
    </div> 
</div>