【问题标题】: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%;
    }
    

    【讨论】: