强制页脚停留在页面底部答案

【问题标题】：Force footer to stay at bottom of page强制页脚停留在页面底部
【发布时间】：2018-09-17 10:53:59
【问题描述】：

目前，我在视点底部有一个页脚，但我希望它位于网页底部。我喜欢这个，因为它与每个页面上的大部分内容重叠。如何更改以下 HTML 和 CSS 来解决此问题？

body {
    background-color: #40E39C;
    }
#nav-menu a {
    text-align: center;
    padding: 30px 45px 30px 45px;
    }
#nav-menu ul{
    margin-bottom: 100px;
    text-align: center;
}
#nav-menu li {
    display: inline-block;
    margin-top: 40px;
    border-style: solid;
    border-width: 1px;
    background-color: white;
    padding: 30px 45px 30px 45px;
    }  
.footer {
    background-color: #EAEDD0;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    }
.footer li {
    display: inline-block;
}
.footer ul {
    text-align: center;
}

<body>
    <div id="nav-menu">
        <ul>
            <li><a href="./a.php">A</a></li>
            <li><a href="./b.php">B</a></li>
            <li><a href="./c.php">C</a></li>
            <li><a href="./d.php">D</a></li>
            <li><a href="./e.php">E</a></li>
            <li><a href="./f.php">F</a></li>
        </ul>
    </div>
    <footer class="footer">
        <ul>
            <li><a href="./a.php">A | </a></li>
            <li><a href="./b.php">B | </a></li>
            <li><a href="./c.php">C | </a></li>
            <li><a href="./d.php">D | </a></li>
            <li><a href="./e.php">E | </a></li>
            <li><a href="./f.php">F</a></li>
        </ul>
</footer>
</body>

更新

我已经删除了 css

position: fixed;
bottom: 0;
left: 0;

并添加

display: relative;

到body标签，但是页脚和它的底部之间还有一些空间。

body {
  background-color: #40E39C;
  position: relative;
}

#nav-menu a {
  text-align: center;
  padding: 30px 45px 30px 45px;
}

#nav-menu ul {
  margin-bottom: 100px;
  text-align: center;
}

#nav-menu li {
  display: inline-block;
  margin-top: 40px;
  border-style: solid;
  border-width: 1px;
  background-color: white;
  padding: 30px 45px 30px 45px;
}

.footer {
  background-color: #EAEDD0;
  text-align: center;
  width: 100%;
  position: fixed;
  bottom: 0;
}

.footer li {
  display: inline-block;
}

.footer ul {
  text-align: center;
}

<body>
  <div id="nav-menu">
    <ul>
      <li><a href="./a.php">A</a></li>
      <li><a href="./b.php">B</a></li>
      <li><a href="./c.php">C</a></li>
      <li><a href="./d.php">D</a></li>
      <li><a href="./e.php">E</a></li>
      <li><a href="./f.php">F</a></li>
    </ul>
  </div>
  <p>a<p/>
  <p>a<p/>
  <p>a<p/>
  <p>a<p/>
  <p>a<p/>
  <p>a<p/>
  v
  <p>a<p/><p>a<p/>
  <p>a<p/>
  <p>a<p/>
  v
  v
  v<p>a<p/><p>a<p/><p>a<p/>
  <footer class="footer">
    <ul>
      <li><a href="./a.php">A | </a></li>
      <li><a href="./b.php">B | </a></li>
      <li><a href="./c.php">C | </a></li>
      <li><a href="./d.php">D | </a></li>
      <li><a href="./e.php">E | </a></li>
      <li><a href="./f.php">F</a></li>
    </ul>
  </footer>
</body>

也许这会有所帮助 这是我的画廊页面。我希望你能用这个更容易找到问题。

#nav-menu a {
    text-align: center;
    padding: 30px 45px 30px 45px;
    }

#nav-menu ul{
    margin-bottom: 100px;
    text-align: center;
}

#nav-menu li {
    display: inline-block;
    margin-top: 40px;
    border-style: solid;
    border-width: 1px;
    background-color: white;
    padding: 30px 45px 30px 45px;
    }
    
.footer {
    background-color: #EAEDD0;
    text-align: center;
    width: 100%;
    }

.footer li {
    display: inline-block;
}

.footer ul {
    text-align: center;
    margin: 0;
}

<body>
    <head>
        <link rel="stylesheet" href="styles.css" type="text/css"/>
    </head>
    <div id="nav-menu">
    <ul>
        <li><a href="./a.php">A</a></li>
        <li><a href="./b.php">B</a></li>
        <li><a href="./c.php">C</a></li>
        <li><a href="./d.php">D</a></li>
        <li><a href="./e.php">E</a></li>
        <li><a href="./f.php">F</a></li>
    </ul>
    </div>
    <div style="clear: both;">
        <img src="images/hotelRoom1.jpg" width="360" height="210" style="float:left; padding: 0px 0px 20px 20px;"/>
        <img src="images/hotelRoom2.jpg" width="360" height="210" style="float:right; padding: 0px 20px 20px 0px"/>
    </div>
    <div style="clear: both;">
        <img src="images/hotelRoom3.jpg" width="360" height="210" style="float:left; padding: 0px 0px 20px 20px;"/>
        <img src="images/hotelRoom4.jpg" width="360" height="210" style="float:right; padding: 0px 20px 20px 0px"/>
    </div>
    <div style="clear: both;">
        <img src="images/hotelRoom5.jpg" width="360" height="210" style="float:left; padding: 0px 0px 20px 20px;"/>
        <img src="images/hotelRoom6.jpg" width="360" height="210" style="float:right; padding: 0px 20px 20px 0px"/>
    </div>
    <footer class="footer">
    <ul>
        <li><a href="./a.php">A | </a></li>
        <li><a href="./b.php">B | </a></li>
        <li><a href="./c.php">C | </a></li>
        <li><a href="./d.php">D | </a></li>
        <li><a href="./e.php">E | </a></li>
        <li><a href="./f.php">F</a></li>
    </ul>
    </footer>

</body>

尝试修复的代码片段。

【问题讨论】：

你试过body{margin:0;填充：0;} ?
我刚刚试过了，还是不行！
Use of forms seem to keep footer attached to content; not sticky at bottom of page的可能重复
你可以在这里找到这个问题的答案：stackoverflow.com/questions/49758538/…
为了向你解释一切，你不能重复问题并清楚地检查这个：meta.stackexchange.com/questions/10841/…欢迎来到stackoverflow

标签： html css footer

【解决方案1】：

添加这个 CSS：

body {
  position: relative;
}

另外添加两个 CSS 属性到你的 .footer 类。所以你的.footer CSS 会是这样的：

.footer {
  background-color: #EAEDD0;
  text-align: center;
  width: 100%;
  position: fixed;
  bottom: 0;
}

这是有效的，因为我在代码片段中检查过它。

【讨论】：

@NickWright 请在上面添加css并再次检查。
我已将该代码添加到我的 css 中，但我没有看到网页底部的页脚。它在视口的底部是的，但不在页面的底部......
嘿，现在我得到了你的问题。您不希望底部有固定的页脚。现在无需添加我在此答案中添加的任何其他 CSS。只需将 overflow : hidden 添加到 .footer 类。您的问题将得到解决。

【解决方案2】：

从 .footer css 中删除以下代码

position: fixed;
bottom: 0;
left: 0;

【讨论】：

这似乎并不能完全解决我的问题。我需要页面底部的页脚，但由于某种原因，现在底部和页脚之间有一些空间。

【解决方案3】：

从.footer 中删除position:fixed 并删除不必要的左、下等。页脚的最终样式是：

.footer {
    background-color: #EAEDD0;
    text-align: center;
    width: 100%;
}

更新 clearfix 和 Unwanted Margin

问题不在我们的解决方案上。在您被剪断的代码中，还有两个其他原因阻止您获得预期的结果。你没有在正确的地方使用 clearfix 并且身体上有一些小的边距导致空间。 clearfix 的解决方案在这里：

div:after{
    content: "";
    display: table;
    clear: both;
}

你应该把这些样式给每个有孩子左右浮动的父母。

当我发现浏览器在body 上给出了边距时，解决方法是：

body{margin: 0}

【讨论】：

请检查我更新的问题以帮助我吗？
我相信您更新中的display: relative 是一个错字。你实际上做了position: relative。您的页脚和页面末尾之间的空间是因为您的浏览器自动生成的ul 边距。在此ul 上footer 使用margin:0 删除空间
啊是的，这是一个错字，但它仍然没有解决它！
这是因为错误的clearfix 和浏览器在body 上提供了边距，您没有得到预期的结果。我已经更新了答案。