主 div 和页脚之间的空白答案

【问题标题】：Blank space between main div and footer主 div 和页脚之间的空白
【发布时间】：2021-02-17 08:58:18
【问题描述】：

主 div 和页脚之间有一个空格，我不明白它来自哪里以及如何调整它，我希望它是一个页脚向下页面，在主 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>

【问题讨论】：

您需要澄清您的确切问题，因为它很难理解，但间距来自top: 190px;

标签： html css footer

【解决方案1】：

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

【讨论】：

并从 #main 中删除 width: 100%

【解决方案2】：

当它的子容器被绝对定位时，它不需要被定位。如果您想在 main 和容器之间保留一点空间，您可以在容器上添加一个边距。这样，每当 main 增益的高度发生变化时，页脚将始终保持相同的空间。

#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>

【讨论】：

顶部：190px；这个应该将页脚放在第一个屏幕中（在主要增益高度变化之前）。最终我需要将页脚向下翻页，当主要内容变高时，页脚向下滚动而不隐藏主要内容。非常感谢！

【解决方案3】：

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

[tag]{
   margin: 0;
}

【讨论】：

【解决方案4】：

  padding: 10px;

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

  top: 190px;

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

【讨论】：