Question

我想显示带有边距的展开式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;
}

LIVE DEMO

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

Answer 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％），这使得它比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

仅限LESS用户：

使用VukašinManojlović的漂亮解决方案无法开箱即用，因为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);
}

Answer 5

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

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

Answer 6

如果可能的话，请尝试在#page元素上使用具有框大小的填充

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

使用边距显示div宽度100％

6 个答案: