我正在创建一个两列布局，其中一个div浮动在左边(宽度几乎为50%)，另一个div浮动在右边。在这些div中，我显示了一个文本区域。这在原则上工作得很好，并且很好地将列的宽度调整为可用的宽度。
然而，当有人使用浏览器的文本区域大小调整功能(例如在Firefox中)来更改文本区域的大小时，div不会调整。这样做的结果是文本区域被调整大小，但扩展到div之外(或者只是被切断)。
我能解决这个问题吗?
兆瓦:
<div style="overflow: hidden;">
<div style="float: left; width: 40%; background: red; padding: 1em;">
<textarea style="width: 100%">left</textarea>
</div>
<div style="float: right; width: 40%; background: green; padding: 1em;">
<textarea style="width: 100%">right</textarea>
</div>
</div>您可以禁用文本区域的水平调整大小
textarea {
resize: vertical; /* you can resize vertically, but not horizontal */
}
你只能允许垂直调整大小来避免这个问题。
CSS
textarea { resize:vertical; }
演示
如果你想禁用大小调整，请这样做:
CSS
textarea { resize:none; }
如果你想调整和扩展div，你应该使用min-height而不是width: