Textarea延伸父div
[英]Textarea stretches parent div
问题描述
I am trying to display a textarea inside a fixed div. 
我正在尝试在固定的div中显示文本区域。
My code is here http://jsfiddle.net/UY5B6/7/ 我的代码在这里http://jsfiddle.net/UY5B6/7/
You can see that the textarea stretches out the div. 您会看到textarea扩展了div。 I just want the textarea to fill the div, not stretch it. 我只希望textarea填充div，而不要拉伸它。
2 个解决方案
解决方案1
1 2014-03-10 03:20:27
I don't see anything wrong. 我没看错。 You've set the width and height of the div to 50%, which considering that its parent element is the <body> element, seems logical that it appears the way it does. 您已将div的宽度和高度设置为50％，考虑到其父元素是<body>元素，因此看起来像这样做是合乎逻辑的。 Are you trying to do something else? 您是否要做其他事情？
edit: I think I see what you are talking about. 编辑：我想我明白你在说什么。 The draggable resize part of the textarea element reaches outside of the div element. textarea元素的可拖动调整大小部分到达div元素之外。 What you can do is, on the textarea element, put: 您可以做的是在textarea元素上输入：
textarea { resize: none; }
to disable that and have it fit the div normally. 禁用它并使其正常适合div。
source: How to disable the resize grabber of an HTML <textarea>? 来源： 如何禁用HTML <textarea>的调整大小抓取器？
解决方案2
0 已采纳 2014-03-10 03:33:26
Use negative top margin to textarea . 使用负的上边距到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%;
}
Now you can add borders to match your style. 现在，您可以添加边框以匹配您的样式。
You can also apply following css. 您也可以应用以下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%;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.