html - 使文本区域适合其余空间

Question

我需要我的文本区域 wrapctxt 始终适合 wrapctop 下方的剩余空间(即 wrapc 的底部)。

.panelb{
  display:grid;
  grid-template-columns: 130px 34% auto;
  height:100vh;
  width:100%;
}
.wrapa{
  background:gold;
}
.wrapb{
  background:silver;
}
.wrapc{
  background:lightseagreen;
}
.wrapctop{
  background:lightblue;
  padding:9px;
}
.wrapctxt{
  display:block;
  width:100%;
  background:gold;
  padding:0;
  outline:none;
  border:none;
}

<div class='panelb'>
  <div class='wrapa'>wrapa</div>
  <div class='wrapb'>wrapb</div>
  <div class='wrapc'>
    <div class='wrapctop'>wrapctop</div>
    <textarea class='wrapctxt'></textarea>
  </div>
</div>

wrapctop 中的文本量是可变的，因此它的高度是未知的。如何使 wrapctxt 完全适合？

Answer 1

* {
  margin: 0;
  padding: 0;
}

.panelb {
  display: grid;
  grid-template-columns: 130px 34% auto;
  height: 100vh;
  width: 100%;
}

.wrapa {
  background: gold;
}

.wrapb {
  background: silver;
}

.wrapc {
  background: lightseagreen;
}

.wrapctop {
  background: lightblue;
  padding: 9px;
}

.wrapctxt {
  display: block;
  width: 100%;
  background: gold;
  padding: 0;
  outline: none;
  border: none;
  overflow: auto;
  height: calc(100% - 36px);
}

<div class='panelb'>
  <div class='wrapa'>wrapa</div>
  <div class='wrapb'>wrapb</div>
  <div class='wrapc'>
    <div class='wrapctop'>wrapctop</div>
    <textarea class='wrapctxt'></textarea>
  </div>
</div>