Question

我创建了一个双列布局，让一个div向左浮动（宽度几乎为50％），另一个div向右浮动。在这些div中，我正在展示一个textarea。这在原理上工作正常，并很好地将列的宽度调整为可用的宽度。

但是，当有人使用浏览器的textarea大小调整功能（例如在Firefox中）来更改textarea的大小时，div不会调整。结果是文本区域被调整大小，但扩展到div之外（或者只是被切断）。

我能以某种方式解决这个问题吗？

MWE：

＆＃13;

    <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>

＆＃13;

Answer 1

您只能允许垂直调整大小以避免出现问题。

<强> CSS

[{"message_recd":""},{"message_recd":""}]

<强> DEMO HERE

如果您想要调整大小，请执行以下操作：

<强> CSS

textarea { resize:vertical; }

如果您想调整大小并展开div，则应使用textarea { resize:none; }代替min-height：

<强> HTML

width

<强> DEMO HERE

Answer 2

您可以禁用文本区域的水平调整大小

textarea {
  resize: vertical; /* you can resize vertically, but not horizontal */
}

调整textarea大小的固定宽度容器

2 个答案: