Question

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

我正在移动网站上工作，并且输入框需要100％的屏幕宽度。但我有padding-left: 16px和margin: 5px使得框在屏幕之外，所以我必须向右滚动才能看到框的结尾。如何使盒子100％减去填充和边距？

Answer 1

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

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

Demo

Browser support

Answer 2

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

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

}

<强>演示 http://jsfiddle.net/PFm3h/

隔离效果：

<强>演示 http://jsbin.com/ozazat/1/edit

很多填充，很多边缘，完全没问题。

Answer 3

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

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

对此的简单补救措施是停止声明身体的宽度。如果由于某种原因这是必需的，您可以将边距设置为0; 同样的原则适用于输入，但它稍微复杂一些。输入（文本/密码）和textareas，即使设置为显示为块，也将分别从大小和列中导出它们的宽度。这可以通过在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 4

另一个解决方案是定位INPUT的绝对位置并添加左/右道具：

#login_box {
    width: 100%;
    position:relative;
}

input[type="text"], input[type="password"] {
    position:absolute;
    left:5px;
    right: 5px
}

您需要调整边距等，因为它们将超出相对布局流程。您也可以毫无问题地添加填充，因为您没有设置固定宽度。

所有浏览器都广泛支持此技术。

演示：http://jsfiddle.net/wuSDh/3/

Answer 5

我遇到了高度为100％的问题，最终令我惊讶的是，答案是对高度/宽度大于100％的元素（即父级）使用填充。

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

简而言之，父母的填充物与孩子的边缘具有相同的作用！

Answer 6

您可以将文本框宽度调整为100％至95％。现在看起来不错

input[type="text"], input[type="password"] {
    width: 95% !important;
    margin: 5px !important;
}

请参阅：http://jsfiddle.net/wuSDh/

100％宽度减去边距和填充

6 个答案: