主要 div 和页脚之间的空白 space

Question

主 div 和页脚之间有一个 space ，我不明白它是从哪里来的，我该如何调整它，我希望它是一个页脚下页，出主要div.

#main {
  border: solid;
  width: 100%;
  height: 2000px;
}

#container {
  min-height: 100%;
  position: relative;
  top: 190px;
}

body {
  padding: 10px;
  padding-bottom: 60px;
  /* Height of the footer */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  /* Height of the footer */
  text-align: center;
  vertical-align: middle;
  background-color: rgb(62, 45, 212);
  color: white;
}

<div id="main"></div>
<div id="container">
  <div id="footer">--------Footer--------</div>
</div>

Answer 1

一些标签有默认边距，你应该使用这一行来清除它们：

[tag]{
   margin: 0;
}

Answer 2

从 #container 中删除 top: 190px;。它应该可以工作。

Answer 3

  padding: 10px;

取消它，您会在主要 div 和页脚之间看到一个 space，但页脚在页面末尾仍然可见。如果你真的不想要任何 space 或者想控制它在容器中改变

  top: 190px;

您也可以将页脚放在容器外，这样您就可以独立控制它们。

Answer 4

容器不需要定位，child绝对定位。如果你想在 main 和容器之间保留一点 space ，你可以在容器上包含一个边距。这样，每当 main 增益的高度发生变化时，页脚将始终保持不变 space.

#main {
  border: solid;
  width: 100%;
  height: 2000px;
}

#container {
  min-height: 100%;
  position: relative;
  margin-top: 50px;
  /* top: 190px; */
}

body {
  padding: 10px;
  padding-bottom: 60px;
  /* Height of the footer */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  /* Height of the footer */
  text-align: center;
  vertical-align: middle;
  background-color: rgb(62, 45, 212);
  color: white;
}

<div id="main"></div>
<div id="container">
  <div id="footer">--------Footer--------</div>
</div>

主要 div 和页脚之间的空白 space

Blank space between main div and footer

html

css

footer