Question

我正在尝试在固定div中显示textarea。

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

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

Answer 1

我没有看到任何错误。你已经将div的宽度和高度设置为50％，考虑到它的父元素是<body>元素，它看起来是合乎逻辑的。你想尝试别的吗？

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

textarea { resize: none; }

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

来源：How to disable the resize grabber of an 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 个答案: