使用边距显示div宽度100％[关闭]

Posted 2021-05-06

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

答案

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

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

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

另一答案

你可以使用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;
}​

或者，尝试使用填充而不是margin和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;
}

另一答案

有时最好做相反的事情并给父母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再次。

另一答案

仅限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);
}

另一答案

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

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

另一答案

如果可能的话，尝试在#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%;
}