我有下面的CSS和HTML片段正在呈现。
文本区域 ｛ 边框:1px实体#999999; 宽度:100%; 保证金:5 px 0; 填充:3 px; ｝ <div style="display: block;" id="rulesformitem" class="formitem"> <label for="rules" id="ruleslabel">规则:</label> <textarea cols="2" rows="10" id="rules"> < / div >
问题是文本区域最终比父区域宽8px(边界为2px +填充为6px)。是否有一种方法继续使用边框和填充，但限制文本区域的总大小为父的宽度?
当前回答
如果你不太介意填充的宽度，这个解决方案实际上会保持填充的百分比。
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding:1%;
}
不完美，但你会得到一些填充和宽度加起来是100%，所以这一切都很好
其他回答
那么负边际呢?
textarea {
border:1px solid #999999;
width:100%;
margin:5px -4px; /* 4px = border+padding on one side */
padding:3px;
}
为什么不忘记这些技巧，只用CSS来做呢?
我经常使用的一个:
.boxsizingBorder {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
点击这里查看浏览器支持。
对于使用Bootstrap的人，textarea。表单控制也会导致文本区域大小问题。Chrome和Firefox似乎使用不同的高度与以下引导CSS:
textarea.form-conrtol{
height:auto;
}
我正在寻找一个内联样式的解决方案，而不是CSS解决方案，这是最好的我可以为一个响应式文本区域:
<div style="width: 100%; max-width: 500px;">
<textarea style="width: 100%;"></textarea>
</div>
这个表hack代码为我工作在所有浏览器从IE8+
<td>
<textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
