javascript - 如何拉伸一个块的高度？

Question

父单元.wrapper的高度为 100%。子块的高度.info未定义，可能不同。如何.wrp为父块的整个剩余高度拉伸子块.wrapper？

Аssociation: 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>

标签： javascriptjquerycss

Answer 1

你不需要 jquery，只需要改变 layer .wrapper display:flex 而不是 display:block

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

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

那是你需要的吗？