我有下面的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:100%;
margin:5px 0;
padding:3px;
}
宽度已经填满，左、右填充为3px。所以会有溢出。
如果你改变你的风格如下:
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding: 3px 1%;
}
我的样式现在所做的是它的宽度为98%剩下的2%完成100%这就是为什么我给左填充1%右填充1%的原因。这样，溢出的问题就可以解决了
其他回答
这个表hack代码为我工作在所有浏览器从IE8+
<td>
<textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
那么负边际呢?
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;
}
点击这里查看浏览器支持。
你可以使用box-sizing属性，所有主流兼容标准的浏览器和IE8+都支持它。不过，对于IE7，你仍然需要一个变通方案。点击这里阅读更多。
我经常用calc()来解决这个问题。你只需要给textarea一个100%的宽度和一定数量的填充，但你必须减去你给textarea的100%宽度的左右填充总数:
textarea {
border: 0px;
width: calc(100% -10px);
padding: 5px;
}
或者如果你想给文本区域一个边框:
textarea {
border: 1px;
width: calc(100% -12px); /* plus the total left and right border */
padding: 5px;
}
