Question

我正在尝试将页脚下移50像素以退出屏幕，但是负边距不起作用（什么都没动），我不确定为什么...

footer {
  background: #111;
  padding: 50px 0 100px;
  text-align: center;
  margin-bottom: -50px;
}

这是一个例子

body {
  background: white;
  margin: 0;
}

section {
  height: 100vh;
}

footer {
  background: green;
  padding: 50px 0 100px;
  text-align: center;
  color: white;
  margin-bottom: -50px;
}

<body>

  <section>
    Section 1
  </section>

  <section>
    Section 2
  </section>

  <footer>
    <div>
      some content here
    </div>
  </footer>

</body>

Answer 1

负利润正常，但未达到您的期望。负底边不会使元素向外移动。它将使父元素缩小。

这是一个简单的例子：

.box {
  border:5px solid #000;
}
.box div{
  background:red;
  height:200px;
  margin-bottom:-50px;
}

<div class="box">
  <div></div>
</div>

如您所见，由于负边距，父元素的高度小于其子元素的高度，并且我们发生了溢出。

这就是您所遇到的情况，并且由于默认情况下是溢出，因此您将不断看到页脚。添加一些边框，您会更好地看到：

body {
  background: white;
  margin: 0;
  border:2px solid;
}

section {
  height: 100vh;
}

footer {
  background: green;
  padding: 50px 0 100px;
  text-align: center;
  color: white;
  margin-bottom: -50px;
}

<section>
    Section 1
  </section>

  <section>
    Section 2
  </section>

  <footer>
    <div>
      some content here
    </div>
  </footer>

要隐藏溢出部分，只需调整溢出属性，您将拥有所需的内容：

html {
 overflow:auto;
}

body {
  background: white;
  margin: 0;
  border:2px solid;
  overflow:hidden;
}

section {
  height: 100vh;
}

footer {
  background: green;
  padding: 50px 0 100px;
  text-align: center;
  color: white;
  margin-bottom: -200px;
}

<section>
    Section 1
  </section>

  <section>
    Section 2
  </section>

  <footer>
    <div>
      some content here
    </div>
  </footer>

如您所见，我添加了更大的负边距以缩小body元素并使所有页脚向外，然后使用overflow:hidden

隐藏它

Answer 2

如果我正确理解了您的问题，则希望页脚在视图中被隐藏一半。

如果是这样，请尝试使用固定位置，将其添加到您的css：

position: fixed;
bottom: -50px;

祝你好运，让我知道是否有帮助。

Answer 3

使用变换代替边距 footer {transform: translateY(-50px);}

Answer 4

如果您使用的是Firefox，请尝试点击Web Developer工具的F12按钮。在检查器选项卡中，您可以检查元素并为该元素设置css规则。

可能与其他地方声明的规则有某种冲突。您可以在Web Developer-> Inspector-> Stiles中实时更改CSS进行测试。

Answer 5

要进行定位，请使用位置和上/下/左/右。例如

position: relative;
bottom:50px;

页脚底边的负边距不起作用

5 个答案: