Textarea延伸父div

Question

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

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

您会看到textarea扩展了div。 我只希望textarea填充div，而不要拉伸它。

Answer 1

我没看错。 您已将div的宽度和高度设置为50％，考虑到其父元素是<body>元素，因此看起来像这样做是合乎逻辑的。 您是否要做其他事情？

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

textarea { resize: none; }

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

来源：如何禁用HTML <textarea>的调整大小抓取器？

Answer 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%;
}

Textarea延伸父div

问题描述

2 个解决方案

解决方案1
1 2014-03-10 03:20:27

解决方案2
0 已采纳 2014-03-10 03:33:26

Textarea延伸父div

问题描述

2 个解决方案

解决方案1 1 2014-03-10 03:20:27

解决方案2 0 已采纳 2014-03-10 03:33:26

解决方案1
1 2014-03-10 03:20:27

解决方案2
0 已采纳 2014-03-10 03:33:26