100%宽度减去边距和填充

Question

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

我正在开发一个移动网站，并需要使输入框的宽度为屏幕的100％。但是我有padding-left: 16px和margin: 5px，这使得框超出屏幕，因此我必须向右滚动才能看到框的末尾。如何使框100％减去填充和边距？

试用一下：http://jsfiddle.net/wuSDh/

- Joakim Melin

---

使用 box-sizing: border-box 可以解决 padding 的问题，但无法解决 margin 的问题。 - mash

由于某些原因无法再回答了，但正确的答案是 width: auto; left: 0px; right: 0px; max-width: 100%; 所有其他答案都存在缺点/问题。 - Emperor Eto

Answer 1

你可以使用 calc，现代浏览器以及IE9+都支持它。

div {
  margin: 10px;
  width: calc(100% - 20px);
  height: 10px;
  background: teal;
}

<div></div>

浏览器支持情况

- Jonathan

---

Android Safari 不支持此功能：http://caniuse.com/calc（原帖作者表示他正在开发一个移动网站） - David Hellsing

除了 Opera mini 浏览器之外，所有主要的移动浏览器现在都支持此功能。 - VVV

之前不知道这个 CSS 特性，它在某些设计情况下非常有用，而且当前浏览器的支持范围相当广泛。点赞！ - Bardo

有没有办法可以创建一个只包含填充和修正宽度的CSS属性？就像将宽度设置为先前值减去填充一样。 - Aaron Franke

危险的方法。最好在绝对定位元素上使用box-sizing: border-box，这意味着它的宽度将与父元素相同，但不包括填充、边距和边框。 - Igor Shumichenko

这是一种处理这类情况不安全的方式，你不应该这样做。如果只改变其中一个，样式就会破坏。如果样式不多，可能看起来无害，但随着代码的增加和类似这样的事情的引入，情况会变得一团糟。 - undefined

Answer 2

块级元素自然填充其父级，但是如果您明确设置宽度，则可以覆盖此行为，从而允许添加到指定宽度的边距和边框。您在body上指定了100％的宽度，因此如果在其右侧内边缘呈现元素，则可以使其在水平方向上溢出文档。

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

这个简单的解决方法是停止声明body的宽度。如果由于某种原因需要这样做，可以将margin设置为0；输入框也适用同样的原理，但是会更加复杂。即使将输入框（文本/密码）和文本区域设置为块级显示，它们的宽度仍将从size和cols中派生。这可以通过在CSS中指定宽度来覆盖，但是它们还具有用户代理指定的边框和边距，因此您再次面临溢出问题。要解决此溢出问题，您需要将输入框的display设置为block，并将box-sizing设置为border-box。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/

- trex005

---

我喜欢这个！我一直在寻找其他方法，而不是使用 calc，因为我不想重复填充代码。请注意，display也可以是 flex。 - Wit

对我来说不起作用。在你的jsfiddle中，输入框仍然比容器宽。登录按钮居中，而输入框向右伸出。 - Curtis

Answer 3

我曾经遇到过100%高度的问题，后来我想到了一个解决方法，就是在100%高度/宽度（即父元素）上方的元素中使用padding。

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

简而言之，父元素的填充效果与子元素的外边距效果相同！

- Dagmar

Answer 4

取消 width:100% 然后添加您需要的任意数量的填充即可：

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

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

隔离效果:

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

有大量的填充、边距，也没有问题。

- user1721135

---

注意：如果您为输入框添加填充，除非您还调整了盒子模型（box-sizing），否则此方法将无效：http://jsfiddle.net/PFm3h/1/ - David Hellsing

是的，box-sizing 对此非常有用。 - user1721135

那么对于垂直填充呢？例如：假设您有一个覆盖在图像上的文本，并且您希望该文本div占用最大高度为100％，考虑到边距/填充并保持停靠在底部？而且这甚至没有考虑顶部和底部边距的百分比是相对于容器的宽度而不是高度计算的这个疯狂的事实。 - Triynko

@Triynko 我不确定我理解你的意思... 你有一个jsfiddle和一个更好的描述你想要实现什么吗？此外，祝贺你回复了一个两年前的答案 :) - user1721135

Answer 5

另一种解决方法是将输入框定位为绝对位置，并添加左/右属性：

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

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

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

这种技术在所有浏览器中都得到广泛支持。

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

- David Hellsing

---

无法在Chrome、Firefox或IE中工作，因为输入框不会拉伸以满足左右两侧的设计要求。在所有这些浏览器中，似乎左侧都具有优先权。 - trex005

Answer 6

您可以将文本框的宽度从100%调整为95%。现在看起来很好。

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

请看这个：http://jsfiddle.net/wuSDh/

- user1193035

---

我认为这不是一个真正的解决方案，它不能产生精确的结果。 - Henrik Karlsson