css - max-height: 100% 不适用于 textarea

Posted 2023-05-07

【中文标题】css - max-height: 100% 不适用于 textarea

【英文标题】：css - max-height: 100% doesn't work on textarea

【发布时间】：2017-05-10 02:03:32

【问题描述】：

我有一个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%，宽度必须为 350 像素

【问题讨论】：

由于每个父母的身高都为 100%，因此您的内容将根据孩子的身高动态增长；在这种情况下，文本区域。它正在做你告诉它做的事情:)

您能否更清楚地解释一下您想要输出的确切程度

@Geeky 当然，我在我的问题中添加了摘要。我希望现在一切都清楚了。

【参考方案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> 

【讨论】：

我的页眉和页脚没有固定高度。他们应该和他们的内容一样高。

然后在 textarea#text max-height: 100% 中尝试最大和最小宽度高度 100% ；最大宽度：100%;

@UUioP 查看更新。也许它会帮助你。 :)

@谢谢！如果您将其包装在另一个 div 中，这会起作用吗？

@UUioP 然后 div 的类或 id 将替换为正文部分 [jsfiddle.net/as58601r/2]