使用边距显示div宽度100%

Question

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

这是我的代码:

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

这是我的css代码:

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

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

现场演示

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 */
    /* ... */
}

然后删除marginfrom#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;
}