Сделать div (высота) занимать родительскую оставшуюся высоту

расширения #down ребенка, чтобы заполнить оставшееся пространство #container может быть достигнуто различными способами в зависимости от поддержки браузера, который вы хотите достичь и Ли #up имеет определенную высоту.

образцы

.container {
  width: 100px;
  height: 300px;
  border: 1px solid red;
  float: left;
}
.up {
  background: green;
}
.down {
  background: pink;
}
.grid.container {
  display: grid;
  grid-template-rows: 100px;
}
.flexbox.container {
  display: flex;
  flex-direction: column;
}
.flexbox.container .down {
  flex-grow: 1;
}
.calc .up {
  height: 100px;
}
.calc .down {
  height: calc(100% - 100px);
}
.overflow.container {
  overflow: hidden;
}
.overflow .down {
  height: 100%;
}

<div class="grid container">
  <div class="up">grid
    <br />grid
    <br />grid
    <br />
  </div>
  <div class="down">grid
    <br />grid
    <br />grid
    <br />
  </div>
</div>
<div class="flexbox container">
  <div class="up">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
  <div class="down">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
</div>
<div class="calc container">
  <div class="up">calc
    <br />calc
    <br />calc
    <br />
  </div>
  <div class="down">calc
    <br />calc
    <br />calc
    <br />
  </div>
</div>
<div class="overflow container">
  <div class="up">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
  <div class="down">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
</div>

решетки

CSS grid макет предлагает еще один вариант, хотя это может быть не так просто, как модель Flexbox. Однако требуется только стиль элемента контейнера:

.container { display: grid; grid-template-rows: 100px }

The grid-template-rows определяет первую строку как фиксированную высоту 100px, и оставшиеся строки будут автоматически растягиваться, чтобы заполнить оставшееся пространство.

я уверен, что IE11 требует -ms- префиксы, поэтому не забудьте проверить функциональность в браузерах, которые вы хотите поддерживать.

Flexbox

CSS3 и все!--44-->Гибкий Модуль Компоновки Коробки (flexbox) теперь хорошо поддерживается и может быть очень легко реализовать. Потому что он гибкий, он даже работает, когда #up не имеет определенной высоты.

#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }

важно отметить, что поддержка IE10 и IE11 для некоторых свойств flexbox может быть ошибочной, а IE9 или ниже вообще не поддерживает.

Расчетную Высоту

еще одним простым решением является использование CSS3 calc функциональный блок, как указывает Альваро в своем ответ, но для этого требуется, чтобы высота первого ребенка была известным значением:

#up { height: 100px; }
#down { height: calc( 100% - 100px ); }

он довольно широко поддерживается, и единственными заметными исключениями являются calc в сочетании с transform или box-shadow, так что не забудьте проверить в нескольких браузерах, если это вас беспокоит.

другие Альтернативы

если требуется более старая поддержка, вы можете добавить height:100%; до #down сделает розовый div полной высоты, с одной оговоркой. Это вызовет переполнение контейнера, потому что #up толкает его вниз.

таким образом, вы могли бы добавить overflow: hidden; к контейнеру, чтобы исправить это.

альтернативно, если высота #up фиксировано, вы смогли расположить его совершенно внутри контейнер, и добавляете прокладк-верхнюю часть к #down.

и, еще один вариант будет использовать отображение таблицы:

#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}​