html - 显示 100% 的 div 宽度和边距

Question

我想显示一个带边距的可扩展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>

Answer 1

您可以使用calc()css 功能（浏览器支持）。

#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（浏览器支持）：

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

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

Answer 2

有时最好做相反的事情并给父div填充：

现场演示

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

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

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

然后删除margin来自#margin

注意：这也增加了顶部和底部的 3%（所以高度增加了 6%），这使得它比 300px 高一点 - 所以如果你需要正好 300px，你可以做类似padding:10px 3%;的事情并改变height:280px;300px .

Answer 3

您可以使用以下 CSS 来实现所需的结果：

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

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

Answer 4

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

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

Answer 5

仅适用于 LESS 用户：

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

禁用 LESS-CSS 覆盖 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);
}

Answer 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%;
}