позиция фиксированный дисплей flex держать последний ребенок максимальная высота [дубликат]

Расширение дочернего элемента #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>

Сетка

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

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

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

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

Flexbox

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

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

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

Расчетная высота

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

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

широко поддерживается, причем единственными заметными исключениями являются & lt; = IE8 или Safari 5 (без поддержки) и IE9 (частичная поддержка). Некоторые другие проблемы включают использование 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;}​