100% 宽度减去边距和填充 [重复]

Posted 2023-03-06

【中文标题】100% 宽度减去边距和填充 [重复]

【英文标题】：100% width minus margin and padding [duplicate]

【发布时间】：2013-07-11 23:33:44

【问题描述】：

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

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

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

【问题讨论】：

使用box-sizing: border-box，您可以设法解决填充问题，但不能解决边距问题。

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

【参考方案1】：

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

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

<div></div>

Browser support

【讨论】：

android Safari 不支持此功能：caniuse.com/calc（OP 表示他正在开发移动网站）

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

不知道这个 css 功能，它在某些设计情况下有很大帮助，而且它当前的浏览器支持相当广泛。 +1

有没有办法可以制作一个只有填充和更正宽度的 CSS 属性？类似于将宽度设置为前一个值减去填充。

危险的方式。最好在绝对元素上使用 box-sizing:border-box，这意味着它的宽度将与父元素相同，但没有填充、边距和边框

【参考方案2】：

块级元素自然填充其父级，但是如果您专门设置宽度，您会覆盖此行为，允许将边距和边框添加到指定宽度。您在 body 上指定 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/

【讨论】：

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

【参考方案3】：

Looe width:100%; 然后简单地使用尽可能多的填充：

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

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

隔离效果：

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

大量填充，大量边距，完全没有问题。

【讨论】：

注意：如果您向 INPUT 添加填充，这将不起作用，除非您还调整框大小：jsfiddle.net/PFm3h/1

是的，box-sizing 会派上用场。

垂直填充呢？例如：假设您有文本覆盖图像，并且您希望该文本 div 占据 100% 的最大高度，在保持停靠在底部的同时考虑边距/填充？这甚至没有考虑到上下边距的百分比是相对于容器的宽度而不是高度计算的，出于某种疯狂的原因。

@Triynko 我不确定我在这里关注你...你有一个 jsfiddle 并且更好地描述你想要完成的事情吗？也恭喜你回复了一个 2 年前的答案:)

【参考方案4】：

我在 100% 高度时遇到了这个问题，最终让我震惊的是，答案是在 100% 高度/宽度（即父级）以上的元素上使用填充。

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

总之，parent的padding和child的margin效果一样！

【参考方案5】：

另一种解决方案是定位 INPUT 的 absolute 并添加左/右 props：

#login_box 
    width: 100%;
    position:relative;


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

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

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

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

【讨论】：

在 Chrome、Firefox 或 IE 中不起作用，因为输入不能同时满足左右指定。似乎在所有这些浏览器中左优先。

【参考方案6】：

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

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

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

【讨论】：

不是真正的 IMO 解决方案，它不会产生准确的结果。