html - 我的网站上完全没有差距 [HTML/CSS]

Question

好吧，我上次问过这个问题，但出于某种奇怪的原因，它被关闭了，因为它“无关紧要”。我根本看不出这是“无关紧要”的。我非常详细地彻底解释了这个问题。所以这是我的第二次尝试。

问题:我的网站底部有一个很大的空隙。那里什么也没有，我不知道是什么导致了这个问题。

图片: WITHOUT EXPLANATIONS

WITH EXPLANATIONS

你明白我想说的吗？最大的差距是我想要消除的。我希望我的内容在它结束的地方结束，但在它之后有一个很大的空白!

网站提琴: 点击 THIS FIDDLE

所以如果你向下滚动，你可以看到绝对虚无的巨大差距，是吗？这就是我要解决的问题。请帮助我!

Answer 1

top: -382px; 导致了页脚下方的空间。另外，为什么不使用 margin: 0 auto; 来使元素居中。最后，还有很多 tags UNCLOSED。

改变这个:

#footer {
  color: white;
  text-align: center;
  background-color: black;
  top: -382px;
  position: relative;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  padding: 20px;
  margin: 0px;
  font-family: Roboto;
  z-index: -1; }

对此:

#footer {
  color: white;
  text-align: center;
  background-color: black;
  position: relative;
  margin: 0 auto;
  width: auto;
  height: auto;
  padding: 20px;
  font-family: Roboto;
  z-index: -1; }

这是您的 fiddle