Question

我有一个div，它包含一个标题，textarea和一个页脚。页眉和页脚与其内容一样大，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获取textarea的高度和宽度。并且您使用显示表和表格行来查看任何屏幕大小的所有元素，您可以在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>

css - max-height：100％不适用于textarea

1 个答案: