Как растянуть блок по высоте?

Question

Родительский блок .wrapper имеет высоту 100%. Высота дочернего блока .info не определена и может отличаться. Как растянуть дочерний блок .wrp на всю оставшуюся высоту родительского блока .wrapper?

Ассоциация: https://ru.stackoverflow.com

Любые другие варианты?

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

div {
  margin: 0;
  padding: 0;
}

.wrapper {
  display: block;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-color: silver;
}

.wrp {
  display: block;
  width: 100%;
  height: 100%;
  background-color: chocolate;
}

.info {
  display: block;
  width: 100%;
  background-color: blue;
}

<div class="wrapper">
  <div class="wrp"></div>
  <div class="info">Did you see the virgin on the rock <br>in a white robe over the waves<br>When, raging in the stormy darkness, <br>the sea Played with the shores,<br>When a ray of lightning lit up<br>Her hourly brilliance with scarlet <br>and the wind beat and flew<br>With her flying veil?</div>
</div>

Answer 1

Вы можете использовать макет CSS Flexbox , чтобы легко выполнить эту работу.

• Родительский элемент должен иметь display: flex; и flex-direction: column;

• У ребенка, которого вы хотите заполнить, оставшегося места родителя должно быть flex: 1;

body,
html {
  height: 100%;
  margin: 0;
}

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

.wrp {
  flex: 1;
  background-color: chocolate;
}

.info {
  background-color: blue;
}

<div class="wrapper">
  <div class="wrp"></div>
  <div class="info">Did you see the virgin on the rock <br>in a white robe over the waves<br>When, raging in the stormy darkness, <br>the sea Played with the shores,<br>When a ray of lightning lit up<br>Her hourly brilliance with scarlet <br>and the wind beat and flew<br>With
    her flying veil?</div>
</div>

Answer 2

Вам не нужно jquery, только изменение в слое. Отображение оболочки: гибкий вместо отображения: блок

 .wrapper {
  display: flex;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-color: silver;
}

https://jsfiddle.net/MAXXALANDER/tm493n1w/2/

Is то, что тебе нужно?

Answer 3

var height_wrapper = $('.wrapper').height(),
  height_info = $('.info').height(),
  height_wpr = height_wrapper - height_info;
$('.wrp').css({
  'height': height_wpr
});

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

div {
  margin: 0;
  padding: 0;
}

.wrapper {
  display: block;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-color: silver;
}

.wrp {
  display: block;
  width: 100%;
  height: 100%;
  background-color: chocolate;
}

.info {
  display: block;
  width: 100%;
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="wrp"></div>
  <div class="info">Did you see the virgin on the rock <br>in a white robe over the waves<br>When, raging in the stormy darkness, <br>the sea Played with the shores,<br>When a ray of lightning lit up<br>Her hourly brilliance with scarlet <br>and the wind beat and flew<br>With
    her flying veil?</div>
</div>