显示 100% 的 div 宽度和边距答案

【问题标题】：Display a div width 100% with margins显示 100% 的 div 宽度和边距
【发布时间】：2012-11-10 14:14:51
【问题描述】：

我想显示一个带有边距的可展开div (width: 100%)...

#page {
  background: red;
  float: left;
  width: 100%;
  height: 300px;
}

#margin {
  background: green;
  float: left;
  width: 100%;
  height: 300px;
  margin: 10px;
}

<div id="page">
  <div id="margin">
    "some content here"
  </div>
</div>

【问题讨论】：

不要把 margin:10px 和 width:100% 放在同一水平线上。创建子div以放置宽度：100％，并且您可以保留父级的边距。

标签： html css

【解决方案1】：

您可以使用calc() css 函数（browser support）。

#page {
  background: red;
  float: left;
  width: 100%;
  height: 300px;
}

#margin {
  background: green;
  float: left;
  width: -moz-calc(100% - 10px);
  width: -webkit-calc(100% - 10px);
  width: -o-calc(100% - 10px);
  width: calc(100% - 10px);
  height: 300px;
  margin: 10px;
}

或者，尝试使用填充而不是边距和box-sizing: border-box (browser support)：

#page {
    background: red;
    width: 100%;
    height: 300px;
    padding: 10px;
}

#margin {
    box-sizing: border-box;
    background: green;
    width: 100%;
    height: 300px;
}

【讨论】：

最好的解决方案是在现代浏览器中使用calc()，在不支持calc()的旧浏览器中使用JS代码+Modernizr。
CSS 函数？听起来不错...但我使用 chrome 和 chrome 告诉我“无效的属性值”...但是为什么？
您必须使用calc(100% - 10px)（数字和减号之间的空格）。同样对于 chrome 和 safari，使用 -webkit 前缀，-moz 用于 FF，-o 用于 Opera！
如果你想跨浏览器兼容，这可能不是最好的方法。由于通常用户不必使用最新最好的浏览器...
为什么不是calc(100% - 20px)？ 10px 只会是边距的一侧，并且只会将宽度减少一半以适应所需的距离。除非我错过了什么。

【解决方案2】：

有时最好反其道而行之，改为给父级div 填充：

LIVE DEMO

我所做的是将#page的CSS更改为：

#page {
    padding: 3%;
    width: 94%; /* 94% + 3% +3% = 100% */

    /* keep the rest of your css */
    /* ... */
}

然后从#margin 中删除margin

注意：这也增加了顶部和底部的 3%（所以高度增加了 6%），这使得它比 300 像素高一点 - 所以如果你需要正好 300 像素，你可以做类似padding:10px 3%; 的操作并更改height:280px; 再次加起来300px。

【讨论】：

这是目前使用 CSS 进行计算的正确方法。这说明了您最终得到一个 div 结构的基本原理，该结构模仿了您要评估的表达式的解析树。

【解决方案3】：

您可以使用以下 CSS 来达到预期的效果：

#page {
   background: red;
   overflow: auto;
}

#margin {
   background: green;
   height: 280px;
   margin: 10px
}

【讨论】：

完全去除宽度似乎不是解决结合边距和宽度功能问题的合适方法。

【解决方案4】：

按标准实现这一点的正确方法是：

#margin {
   background: green;
   height: 280px;
   margin: 10px;
   width: auto;
   display: block;
}

【讨论】：

+1 与width: 100% 相比，width: auto 的作用就像一个魅力。用谷歌搜索差异后，我不确定为什么有人会使用 100%。如果他们知道他们在做什么。我当然不会。
没有“正确”的方法，而且这个问题超出了默认为display:block的元素（例如表格），因此缺乏这个解决方案。
这似乎是最好的解决方案，当它可用时。

【解决方案5】：

仅适用于 LESS 用户：

使用 Vukašin Manojlović 的出色解决方案无法开箱即用，因为 LESS 在 LESS 编译期间执行 + 或 - 操作。一种解决方案是转义 LESS，使其不执行操作。

Disable LESS-CSS Overwriting calc()

@someMarginVariable = 15px;

margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);
width: -o-calc(~"100% - "@someMarginVariable*2);

或者可以使用类似的mixin：

.fullWidthMinusMarginPaddingMixin(@marginSize,@paddingSize) {
  @minusValue: (@marginSize+@paddingSize)*2;
  padding: @paddingSize;
  margin: @marginSize;
  width: calc(~"100% - "@minusValue);
  width: -moz-calc(~"100% - "@minusValue);
  width: -webkit-calc(~"100% - "@minusValue);
  width: -o-calc(~"100% - "@minusValue);
}

【讨论】：

【解决方案6】：

如果可能，请尝试在 #page 元素上使用带有 box-sizing 的填充

#page {
    padding: 10px;
    box-sizing: border-box;
    background: red;
    float: left;
    width: 100%;
    height: 300px;
}
#margin {
    background: green;
    float: left;
    width: 100%;
    height: 100%;
}

【讨论】：