最大高度：100% 不适用于文本区域

Question

我有一个div，由标头，textarea和一个页脚组成。标题和页脚与他们的内容一样大，而文本方面占据了其余空间。TextArea的max-height为100％，因为文本area的高度不应超过100％。但是，如果您调整了文本方面的大小，则Textarea将获得高于父母的100％。如何防止这种情况？

代码：http：//jsfiddle.net/fc7ey/1650/

摘要：

• 所有元素的高度总和必须为100％
• textarea-wrapper DIV的高度应为totalHeight(100%) - headerHeight - footerHeight
• 标题和页脚不得具有固定的高度，它们应该和其内容一样大。
• 父/包装师的高度必须为80％，宽度必须为350px

Answer 1

如果要查看相同屏幕大小的

，则可以使用CALC CSS进行TextArea的高度和宽度。并且您使用显示台和表行以查看任何屏幕尺寸中的所有元素，嗯，您可以在teaxareadiv中使用高度计算功能以获取高度，然后从类似的东西中删除标题和页脚高度**检查更新更新的小提琴，请参阅CSS Part

更新：现在第二个DIV将剩余的高度，宽度和文本区域将不会水平溢出

html,
body,
* {
  margin: 0;
  padding: 0;
}
.wrap {
  width: 350px;
  height: 80%;
  display: table;
  border: 3px solid magenta;
}
.wrap > div {
  background: red;
  display: table-row;
    height: 0;
}
#textarea-wrapper {
  background: pink;
  height: auto;
}
#text {
  max-width: calc(350px - 3px);
  max-height:100%;
}

<div class="wrap">
 <div id="header">Header<br>Header<br>Header<br>Header<br>Header<br></div>
 <div id="textarea-wrapper">
   <textarea id="text"></textarea>
 </div>
 <div id="footer">Footer<br>Footer<br>Footer<br>Footer<br></div>
</div>