Textarea 拉伸父 div答案

【问题标题】：Textarea stretches parent divTextarea 拉伸父 div
【发布时间】：2014-04-13 00:34:07
【问题描述】：

我正在尝试在固定 div 中显示文本区域。

我的代码在这里http://jsfiddle.net/UY5B6/7/

您可以看到textarea 延伸了div。我只想让 textarea 填充 div，而不是拉伸它。

【问题讨论】：

我对你的问题感到困惑。您有什么方法可以向我们展示您想要的以及它与您所拥有的有何不同？
对不起，我已经编辑了问题。

标签： html css

【解决方案1】：

我看不出有什么问题。您已将 div 的宽度和高度设置为 50%，考虑到它的父元素是 <body> 元素，它看起来是合乎逻辑的。你在尝试做其他事情吗？

编辑：我想我明白你在说什么。 textarea 元素的可拖动调整大小部分到达 div 元素之外。你可以做的是，在textarea 元素上，放：

textarea { resize: none; }

禁用它并使其正常适合 div。

来源：How to disable the resize grabber of an HTML <textarea>?

【讨论】：

【解决方案2】：

对textarea使用负上边距。

div.modal a {
    position: relative; /* Show above textarea */
}
div.modal textarea {
    margin-top: -24px; /* Equal to 'close' height */
    padding-top: 24px; /* Equal to 'close' height */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

现在您可以添加边框以匹配您的风格。

你也可以应用下面的css。

div.modal a {
    position: relative;
    z-index: 1; /* Show above textarea */
    display: block;
    text-align: center;
}
div.modal textarea {
    position: absolute;
    top: 0;
    padding-top: 24px; /* Equal to 'close' height */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

【讨论】：