Question

我有<textarea>需要适合大小未预先确定的空间（占屏幕大小的百分比）。如果通过设置常规CSS属性，我可以通过FireFox获得良好的结果：

#container { width: 70%; height:70% }
#text_area { width: 100%; height: 100%; margin: 0; padding:0; }

然而在IE 6和7中，我得到了不同的，奇怪的结果。在IE6中，文本框似乎在左侧和右侧都有填充，从而推动容器的大小增长。在IE7中，文本框左侧有填充，但不会使容器的大小增大 - 而是将其右边缘推到容器外部。

高度设置似乎对IE6或IE7都没有影响; <textarea>在两种情况下都是2行，忽略高度：100％指令。

是否有一致的方法来跨浏览器调整<textarea>的大小？

有没有办法摆脱<textarea>左边的填充？

更新

使用position:absolute删除了填充，但width:100%仍然被搞砸了。 IE7似乎计算出100％的宽度太大，导致<textarea>溢出包含它的<div>。

如果我有机会，我会创建一个独立的例子......

Answer 1

我在IE7中也看到了ASP.Net文本框控件的这个问题。我不记得我找到了解决方案的位置（但是找到了解决方案的人的道具），但我遇到了同样的问题，其中width =“100％”的文本框实际上会破坏DOM而我的整个内容部分将“溢出到相邻部分（例如基于表格的导航）。

我最终采用的解决方案是将asp：Textbox包装在自己的表中并设置“table-layout：fixed; width：100％”属性并在textbox / textarea上设置“position：relative; width：100％ ;”所以块看起来像这样：

<table style="width: 100%; table-layout: fixed;">
  <tbody>
    <tr>
     <td>
      <asp:Textbox id="txtMyTextbox" runat="server" Width="100%" style="position: relative;"/>
     </td>
    </tr>
   </tbody>
 </table>

这不是最漂亮的解决方案，但我已经确认它可以跨所有浏览器工作。我对此问题进行了撰写HERE。

希望这会有所帮助。

Answer 2

可能有一种偷偷摸摸的CSS方式来实现这一点，我不知道，但根据我的经验，这是使用一些Javascript是合理的事情之一。

您可以使用JQuery或Prototype获得所需的高度（我想要的当前窗口），或者使用纯Javascript：Get the height of the current document然后

document.getElementById("text_area").style.height = calculated_height+"px";

左手填充我觉得很奇怪。你能发一个例子吗？

Answer 3

为了解决这类问题，我们必须考虑如何在浏览器中处理百分比。首先......百分比不存在，它们在某些时候被转换为像素。步骤是1）浏览器呈现所有标签，2）浏览器测量外部，父级，百分比大小的框以获得其大小（以像素为单位），并根据子框大小设置子框的大小。我认为要验证的第一件事是textarea的父框的大小，以及它的父框，依此类推。这可以通过检查Firebug和IE Developer Toolbar中的“布局”信息来完成，并找出两种浏览器中测量的不同。一旦你发现那个元素（或elemets）可以调整css来考虑它们。

请记住，百分比大小调整会考虑父框内容的宽度和高度来调整子元素的大小而不是填充。因此，如果父框宽度为500px并且具有100px填充，则100％宽度的子元素将为500px，并且100px填充将围绕它，并且两个元素将占用屏幕的700px。

Answer 4

尝试

在文本区域css上添加最小高度：100％。在包含绝对定位的div上，在css上将位置设置为relative。

也使用transistional Doctypes而不是严格，而你的。确保没有未关闭的标签。如果你能使页面符合XHTML或HTML标准，那么我会更好，这样你就可以减少跨浏览器兼容性的问题。

Answer 5

尝试将display:block和border:0添加到#text_area。前者应该处理高度问题而后者应该阻止width:100%溢出。

在IE，FF，Safari / Chrome </textarea>下持续调整<textarea>的大小

更新

5 个答案: