我有一个 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
最佳答案
如果你想在相同的屏幕尺寸下看到它们,你可以使用 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>
关于html - css - 最大高度 : 100% doesn't work on textarea,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41317138/