我有下面的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)。是否有一种方法继续使用边框和填充，但限制文本区域的总大小为父的宽度?
当前回答
我经常用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;
}
其他回答
你可以使用box-sizing属性，所有主流兼容标准的浏览器和IE8+都支持它。不过，对于IE7，你仍然需要一个变通方案。点击这里阅读更多。
如果你不太介意填充的宽度，这个解决方案实际上会保持填充的百分比。
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding:1%;
}
不完美，但你会得到一些填充和宽度加起来是100%，所以这一切都很好
我经常用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;
}
填充值也起着一定的作用。使用你发布的风格:
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%的原因。这样，溢出的问题就可以解决了
问题在于box-sizing属性。 默认情况下，box-sizing属性的初始值是content-box。 所以你在引擎盖下面有这样的东西:
textarea {
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
box-sizing: content-box;
}
box-sizing:内容框;意味着实际元素的宽度等于元素内容框的宽度。 所以当你添加padding(在这个例子中padding-right和padding-left ->，因为我们在讨论width)和border(在这个例子中border-right和border-left ->，因为我们在讨论width)，这些值被添加到最终的width中。所以你的元素会比你想要的宽。
设置为box-sizing: border-box;。宽度的计算方法如下:
horizontal border + horizontal padding + width of content box = width
在这种情况下，当你添加水平边框和水平填充时，元素的最终宽度不会改变，事实上，内容框将缩小以满足方程。
