Question

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

Answer 1

从SELECT from_unixtime(floor(to_unixtime(from_iso8601_timestamp(CONCAT(CAST(date AS VARCHAR), 'T', time, 'Z'))) / 300) * 300), request_ip, COUNT(request_ip) AS count FROM cloudfront_logs WHERE "date" BETWEEN DATE '2020-10-28' AND DATE '2020-11-04' GROUP BY from_unixtime(floor(to_unixtime(from_iso8601_timestamp(CONCAT(CAST(date AS VARCHAR), 'T', time, 'Z'))) / 300) * 300), request_ip ORDER BY count DESC;中删除top: 190px;。应该可以。

Answer 2

某些标签具有默认边距，您应使用此行清除它们：

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information",
      "Microsoft.AspNetCore.Routing":  "Trace"
    }
  },
  "AllowedHosts": "*"
}

Answer 3

  padding: 10px;

取消该设置，您可以在main div和页脚之间留一个空格，但是页脚在页面末尾仍然可见。如果您真的不想要任何空间或想要控制它，请在容器中更改

  top: 190px;

您还可以将页脚从容器中取出，这样就可以独立控制它们。

Answer 4

在绝对定位子容器时，无需定位容器。如果要在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>

主div和页脚之间的空白

4 个答案: