显示一个宽度为 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>

原文由 Random78952 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用以下 CSS 来获得所需的结果：

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

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

原文由 Daniel Calliess 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

#margin {
  background: green;
  float: left;
  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;
}

原文由 Vukašin Manojlović 发布，翻译遵循 CC BY-SA 4.0 许可协议