div里面的textarea答案

【问题标题】：textarea inside divdiv里面的textarea
【发布时间】：2012-05-25 08:46:31
【问题描述】：

我认为我在这里做错了，我希望 textarea 在每一侧都比父 div 小 10px，但事实并非如此，它太小了：

<html>
  <div style="position: absolute; left: 10px; top: 10px; width:50%; height: 50%; border: 1px solid #000000;">
    <textarea style="position: absolute; left: 10px; top: 10px; bottom: 10px; right: 10px; border: 1px solid #FF0000; resize:none;"></textarea>
  </div>
</html>

jsfiddle：http://jsfiddle.net/2a7LR/1/

为什么会这样？我怎样才能使它适合从父 div 的每边小 10 像素？

它只在 chrome/safari 中正确显示，但在其他所有浏览器（firefox、opera、IE8）中都错误

【问题讨论】：

你需要正好 10px 还是你可以使用 % width/height 作为文本框？
即使使用百分比也不起作用：jsfiddle.net/2a7LR/6

标签： css html textarea

【解决方案1】：

http://jsfiddle.net/2a7LR/5/ 为你调整了一些 CSS。基本使用width: 100%; height: 100%，将10px移到容器的padding属性，然后在textarea中添加box-sizing，使大小考虑到边框。

【讨论】：

【解决方案2】：

<html>
<div style="position: absolute; left: 10px; top: 10px; width:50%; height: 50%; border: 1px solid #000000;">
    <textarea style="position: relative; margin: 10px 10px 10px 10px; width:90%; height: 90%"></textarea>
</div>
</html>

这应该适合你。文本区域可以在绝对 div 中是相对的。您只需要使用边距而不是顶部和左侧来定位它。

干杯，费德

编辑：并且还注意到您没有在文本区域中设置任何宽度和高度，因此不知道它的大小 - 它只是放置了默认值。

【讨论】：

【解决方案3】：

http://jsfiddle.net/EzJ8G/1/ 替换textarea中的样式并添加padding:10px；

【讨论】：