Question

我正在使用footer创建一个全宽margin，但似乎当我添加margin溢出时。我怎么能避免这个？

footer {
  bottom: 0;
  position: absolute;
  margin 40px;
  width: 100%;
  font-size: 2em;
}
footer .left_div {
  float: left;
}
footer .right_div {
  float: right;
}

<footer>
  <div class="left_div">This is a long test</div>
  <div class="right_div">This is another text</div>
</footer>

Answer 1

您的css声明中缺少:。是的，这是致命的。

margin 40px;

是

margin: 40px;

您的footer位于相对于其最近位置祖先或包含块的指定位置。正如MDN所说的那样Absolute Position。而且你的父母也没有相对最亲密的父母。在您的情况下，在小提琴中，width: 100%将采用iframe的宽度700px。

但是，您可以使用这样的解决方法，

footer {
  font-size: 2em;
  margin: 40px;
  bottom:0;
  left: 0;
  position: absolute;
  right: 0;
}

这是更新后的fiddle

Answer 2

那是因为你指定了100％的宽度，所以当你添加边距时，它每边变成100％+ 40px，使它比窗口宽80px。

有几种方法可以修复它，你可以使用.results作为宽度，这样可以减去边上的额外边距：

calc

甚至更容易删除width属性并添加footer { bottom: 0; position: absolute; margin: 40px; width: calc(100% - 80px); /* 40px on each side = 80px */ font-size: 2em; }和left属性来拉伸元素而不直接弄乱大小：

right

Answer 3

根据我的经验，最好的方法是移除width: 100%并使用left: 0; right: 0;

footer {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  margin: 40px;
  font-size: 2em;
}

footer .left_div {
  float: left;
}

footer .right_div {
  float: right;
}

<footer>
  <div class="left_div">This is a long test</div>
  <div class="right_div">This is another text</div>
</footer>

Answer 4

重置margin中的默认body并将box-sizing:border-box添加到footer，

因为您正在应用margin并使用position:absolute，您需要使用calc()

另外，您在margin 40px上输入错误，应为margin:40px

body {
  margin: 0
}
footer {
  bottom: 0;
  position: absolute;
  margin: 40px;
  width: calc(100% - 80px);
  font-size: 2em;
  box-sizing: border-box;
  background: red
}
footer .left_div {
  float: left;
}
footer .right_div {
  float: right;
}

<footer>
  <div class="left_div">This is a long test</div>
  <div class="right_div">This is another text</div>
</footer>

Answer 5

添加左：0;到页脚css：）

Answer 6

当余量增加div或块外部的空间时，它会溢出。如果要隐藏溢出，请使用overflow: hidden。

如果要显示带边距的所有数据，则应减小宽度，然后应用边距。

在div / block上应用margin而不是使用padding是不值得的。填充从内部增加。

在全宽页脚中创建边距

6 个答案: