Rellenar CSS de solo espacio vertical restante

Necesito llenar el espacio vertical restante de #wrapper bajo #first con #second div.

Necesito una única solución CSS.

HTML: 

<div id="wrapper">
    <div id="first"></div>
    <div id="second"></div>
</div>

CSS: 

#wrapper
{
   width:300px;
   height:100%;
}

#first
{
   width:300px;
   height:200px;
   background-color:#F5DEB3;
}

#second
{
   width:300px;
   height:100%; //<-----This should fill the remaining space
   background-color:#9ACD32;
}
Author: web-tiki, 2014-04-30
Source

9 answers

Puedes hacer esto con position:absolute; en el div #second así:

FIDDLE

CSS: 

#wrapper{
    position:relative;
}

#second {
    position:absolute;
    top:200px;
    bottom:0;
    left:0;
    width:300px;
    background-color:#9ACD32;
}

EDITAR: Solución alternativa

Dependiendo de su diseño y el contenido que tenga en esos divs, podría hacerlo mucho más simple y con menos marcado como este :

FIDDLE

HTML: 

<div id="wrapper">
    <div id="first"></div>
</div>

CSS: 

#wrapper {
    height:100%;
    width:300px;
    background-color:#9ACD32;
}
#first {
    background-color:#F5DEB3;
    height: 200px;
}
 18
Author: web-tiki,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-23 09:56:42

Puede usar CSS Flexbox en lugar de otro valor de visualización, El módulo Flexbox Layout (Caja Flexible) tiene como objetivo proporcionar una forma más eficiente de diseñar, alinear y distribuir espacio entre los elementos en un contenedor, incluso cuando su tamaño es desconocido y/o dinámico.

Ejemplo

/* CONTAINER */
#wrapper
{
   width:300px;
   height:300px;
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -ms-flex-direction: column;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

/* SOME ITEM CHILD ELEMENTS */
#first
{
   width:300px;
    height: 200px;
   background-color:#F5DEB3;

}

#second
{
   width:300px;
   background-color: #9ACD32;
    -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1; /* OLD - Firefox 19- */
    -webkit-flex: 1; /* Chrome */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* NEW, */
}

Ejemplo Jsfiddle

Si desea tener soporte completo para navegadores antiguos como IE9 o inferiores, tendrá que usar un polyfills como flexy , este polyfill habilita el soporte para el modelo Flexbox, pero solo para las especificaciones de 2012 del modelo flexbox.

Recientemente encontré otro polyfill para ayudarte con Internet Explorer 8 & 9 o cualquier navegador anterior que no tenga soporte para el modelo flexbox, todavía no lo he probado pero dejo el enlace aquí

Puede encontrar una guía útil y completa del modelo Flexbox de Chris Coyer aquí

 39
Author: xzegga,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-15 18:35:50

Solución Flexbox

Nota: Agregue prefijos de proveedor flexible si lo requieren sus navegadores compatibles .

html, body {
  height: 100%;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100%;
}

.first {
  height: 50px;
}

.second {
  flex-grow: 1;
}
<div class="wrapper">
  <div class="first" style="background:#b2efd8">First</div>
  <div class="second" style="background:#80c7cd">Second</div>
</div>
 18
Author: Reggie Pinkham,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-24 02:06:43

Si puede agregar un par de divs adicionales para que su html se vea así: 

<div id="wrapper">
    <div id="first" class="row">
        <div class="cell"></div>
    </div>
    <div id="second" class="row">
        <div class="cell"></div>
    </div>
</div>

Puede hacer uso de las propiedades display:table: 

#wrapper
{
   width:300px;
   height:100%;
   display:table;
}

.row 
{
   display:table-row;
}

.cell 
{
   display:table-cell;
}

#first .cell
{
   height:200px;
   background-color:#F5DEB3;
}

#second .cell
{
   background-color:#9ACD32;
}

Ejemplo

 13
Author: Pete,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-30 13:20:59

¿Ha intentado cambiar la altura de la envoltura a vh en lugar de %?

#wrapper {
width:300px;
height:100vh;
}

Eso funcionó muy bien para mí cuando quise llenar mi página con un fondo degradado, por ejemplo...

 1
Author: Stian Eggum Tellnes,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-09 11:02:14

Todo lo que necesita es un poco de marcado mejorado. Envuelva el segundo dentro del primero y se renderizará bajo.

<div id="wrapper">
    <div id="first">
        Here comes the first content
        <div id="second">I will render below the first content</div>
    </div>
</div>

Demo

 0
Author: JimmyRare,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-30 13:49:02

Si no desea tener alturas fijas para su contenedor principal (arriba, abajo,....), simplemente puede utilizar este css-file para obtener un contenedor flexible que utiliza el espacio restante incl. ¡trabajando!!! barras de desplazamiento

Fiddler 

<!DOCTYPE html>
<html >
<head>
    <title>Flex Container</title>
    <link rel="stylesheet" href="http://demo.qooxdoo.org/5.0/framework/indigo-5.0.css">

  <style>
    .cont{
        background-color: blue;
        position: absolute;
        height: 100%;
        width: 100%;
    }

    .headerContainer {
        background-color: green;
        height: 100px;
        width: 100%;
    }

    .mainContainer {
        background-color: white;
        width: 100%;
        overflow: scroll
    }

    .footerContainer {
        background-color: gray;
        height: 100px;
        width: 100%;
    }
  </style>


  </head>

<body class="qx-flex-ready" style="height: 100%">
  <div class="qx-vbox cont">
    <div class="headerContainer">Cell 1: flex1</div>
    <div class="mainContainer qx-flex3">
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>

    </div>
    <div class="footerContainer" >Cell 3: flex1</div>
  </div>
</body>
</html>
 0
Author: Tobias Koller,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-30 14:26:09

Simplemente puede agregar la opción overflow:auto : 

#second
{
   width:300px;
   height:100%;
   overflow: auto;
   background-color:#9ACD32;
}
 -2
Author: Mohamed Elmawazini,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-25 08:25:02

Necesita javascript y algunos cálculos del lado del cliente: http://jsfiddle.net/omegaiori/NERE8/2 /

Necesitará jquery para lograr efectivamente lo que desea. esta función es muy simple pero muy eficaz: 

(function () {


    var heights = $("#wrapper").outerHeight(true);
    var outerHeights = $("#first").outerHeight(true);
    jQuery('#second').css('height', (heights - outerHeights) + "px");

})();

Primero detecta la altura de la envoltura, ya que se establece en 100% es diferente cada vez (depende de qué pantalla está aterrizando). en el segundo paso le da al div #second la altura apropiada restando de la altura de la envoltura el div #first altura. el resultado es la altura disponible que queda en la envoltura div

 -5
Author: valerio0999,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-30 13:42:40