html - css - 最大高度 : 100% doesn't work on textarea

Question

我有一个 div，它由页眉、文本区域和页脚组成。页眉和页脚与其内容一样大，textarea 占据剩余空间。 textarea 的 max-height 为 100% ，因为 textarea 的高度不应超过 100%。但是，如果您调整 textarea 的大小，textarea 会高于父级的 100%。如何预防？

代码:http://jsfiddle.net/FC7eY/1650/

总结:

• 所有元素的高度之和必须为100%
• textarea-wrapper div 的高度应该是totalHeight(100%) - headerHeight - footerHeight
• 页眉和页脚不能有固定的高度，它们应该与其内容一样大。
• 父/包装 div 的高度必须为 80%，宽度必须为 350px

Answer 1

如果你想在相同的屏幕尺寸下看到它们，你可以使用 calc css 来计算文本区域的高度和宽度。并且您使用显示表格和表格行来查看任何屏幕尺寸的所有元素，那么您可以在 teaxarea div 中使用高度计算函数来计算高度并从中删除页眉和页脚高度** 检查更新Updated Fiddle看css部分

更新:现在第二个 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>