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

Ответ 1

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

Ответ 2

Прошло почти два года с тех пор, как я задал этот вопрос. Я только что придумал css calc(), который решает эту проблему, и я подумал, что было бы неплохо добавить ее, если у кого-то будет такая же проблема. (Кстати, я в конечном итоге использовал положение абсолютное).

http://jsfiddle.net/S8g4E/955/

Вот css

#up { height:80px;}
#down {
    height: calc(100% - 80px);//The upper div needs to have a fixed height, 80px in this case.
}

И больше информации об этом здесь: http://css-tricks.com/a-couple-of-use-cases-for-calc/

Поддержка браузера: http://caniuse.com/#feat=calc

Ответ 3

Мой ответ использует только CSS, и он не использует переполнение: hidden или display: table-row. Это требует, чтобы первый ребенок действительно имел заданную высоту, но в вашем вопросе вы заявляете, что только второй ребенок нуждается в том, чтобы его высота не указывалась, поэтому я считаю, что вы должны признать это приемлемым.

HTML

<div id="container">
    <div id="up">Text<br />Text<br />Text<br /></div>
    <div id="down">Text<br />Text<br />Text<br /></div>
</div>

CSS

#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; height: 63px; float:left; width: 100% }
#down { background:pink; padding-top: 63px; height: 100%; box-sizing: border-box; }

http://jsfiddle.net/S8g4E/288/

Ответ 4

проверьте демонстрацию - http://jsfiddle.net/S8g4E/6/

использовать css -

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

Ответ 5

Если я не понимаю, вы можете просто добавить height: 100%; и overflow:hidden; в #down.

#down { 
    background:pink; 
    height:100%; 
    overflow:hidden;
}​

Live DEMO

Изменить: поскольку вы не хотите использовать overflow:hidden;, вы можете использовать display: table; для этого сценария; однако он не поддерживается до IE 8. (display: table; поддержка)

#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;
}​

Live DEMO

Примечание. Вы сказали, что высота #down должна быть #container height минус #up height. Решение display:table; делает именно это, и этот jsfiddle будет изображать это довольно четко.

Ответ 6

Вы можете использовать поплавки для нажатия вниз:

http://jsfiddle.net/S8g4E/5/

У вас есть контейнер с фиксированным размером:

#container {
    width: 300px; height: 300px;
}

Контент разрешен для потока рядом с поплавком. Если мы не установим float в полную ширину:

#up {
    float: left;
    width: 100%;
}

Пока #up и #down обмениваются верхней позицией, содержимое #down может начинаться только после нижней части плавающего #up:

#down {
    height:100%;
}​

Ответ 7

Я не уверен, что это можно сделать исключительно с помощью CSS, если только вам не нравится притворяться иллюзиями. Возможно, используйте ответ Джоша Маина и установите #container в overflow:hidden.

Для чего это стоит, здесь решение jQuery:

var contH = $('#container').height(),
upH = $('#up').height();
$('#down').css('height' , contH - upH);