100%宽度减去边距和填充

Question

我一直在寻找,但我找不到适用于我自己的问题的解决方案.

我正在移动网站上工作,需要输入框为100%宽度的屏幕.但我有padding-left: 16px,margin: 5px这使得盒子走出屏幕,所以我必须向右滚动才能看到盒子的末端.如何使盒子100%减去填充和边距？

尝试一下:http://jsfiddle.net/wuSDh/

Answer 1

您可以使用calc现代浏览器支持它和IE9 +.

div {
  position: absolute;
  height: 20px;
  width: calc(50% - 10px);
  padding: 5px;
}

演示

浏览器支持

Answer 2

块级元素自然会填充它们的父元素，但是，如果您专门设置宽度，则会覆盖此行为，允许将边距和边框添加到指定的宽度。您在主体上指定 100% 宽度，因此如果有元素渲染到其右内边缘，则有机会水平溢出文档。

示例：http : //jsfiddle.net/trex005/6earf674/

对此的简单补救方法是停止声明主体的宽度。如果出于某种原因需要这样做，您可以将边距设置为 0；相同的原则适用于输入，但稍微复杂一些。输入（文本/密码）和文本区域，即使设置为显示为块也会分别从大小和列中获得它们的宽度。这可以通过在 CSS 中指定宽度来覆盖，但是它们也有用户代理指定的边框和边距，因此您再次遇到溢出问题。要修复此溢出，您需要将输入的显示设置为阻止并且它是 box-sizing:border-box。边框框将计算边框和填充作为宽度的一部分。

input[type="text"], input[type="password"] {
    width: 100% !important;
    margin: 5px !important;
    box-sizing:border-box;
    display:block;
}

一旦你这样做，你会注意到元素之间有额外的间距。这是因为 display:block 强制换行，而<br>你添加的标签是多余的。去掉那些，你就做生意了！

演示： http : //jsfiddle.net/trex005/6earf674/1/

Answer 3

我在 100% 高度时遇到了这个问题，最终我突然想到答案是在 100% 高度/宽度（即父元素）上方的元素上使用填充。

<div style="padding: 1rem;">
    <div style="height:100%; width:100%">
        <p>The cat sat on the mat</p>
    </div>
</div>

简而言之，父级的 padding 与子级的 margin 具有相同的效果！

Answer 4

松散width:100%;然后只需使用尽可能多的填充:

#login_box {
    padding:10px;
    margin:50px;
}

演示 http://jsfiddle.net/PFm3h/

隔离效果:

演示 http://jsbin.com/ozazat/1/edit

很多填充,很多边缘,没有任何问题.