我的页脚没有留在页面底部[重复]答案

【问题标题】：My footer does not stay at the bottom of the page [duplicate]我的页脚没有留在页面底部[重复]
【发布时间】：2020-12-16 06:47:14
【问题描述】：

我正在使用 Wordpress，但无法让页脚停留在网页底部。我有一个 page.php，这意味着我对所有页面都使用相同的界面，除了我在 Wordpress 中编辑的页面内容。在某些页面上它可以正常工作，但在内容较少的页面上（如果有意义的话，垂直文本较少）它位于页面中间并在底部创建一个空白区域。这是我用于页脚 atm 的 CSS。

.footer-nav {
    display: block;
    width: 100%;
    height: 200px;
    background-image: url(/pics/bannerbottom.jpg);
    background-size: 100% 120%;
    padding: 20px;
    position: relative;
    clear: both;
    bottom: 0;
    margin-top: 100px;
    float: left;
}

.foot-container {
    bottom: 0;
}

HTML 只是一个简单的div。

<div class="foot-container">
    <div class="footer-nav"></div>
</div>

【问题讨论】：

这是因为您的包含不足以将页脚向下发送。在这种情况下，您需要使用 position:absolute 定位您的 .footer。如果您想了解更多信息，请告诉我。
您的代码没有任何问题 - 这是标准的网页行为。如果你想改变这种行为，你可以用 CSS 让你的页脚“粘性”，让它总是在屏幕的最底部可见，或者你让页面至少是全高。让我们知道您想要什么行为，以便我们提供帮助。
能否在背景图片url()中添加有问题的图片原链接

标签： html css wordpress footer

【解决方案1】：

您可以尝试为内容添加最小高度。

例如，如果这是您的内容：

<div class="wrapper">
  Content goes here
</div>

将以下 css 添加到（在本例中）.wrapper：

.wrapper{
  min-height:100%;
}

您当然可以根据需要更改最小高度的数量。

【讨论】：

【解决方案2】：

我会固定页脚的位置：

.foot-container {
    bottom: 0;
    position: fixed;
    width: 100%;
}

html, body {
  min-height: 100%;
}

【讨论】：

【解决方案3】：

以下代码将始终将您的页脚放在底部，无论您有多少内容：

 body {
    min-height: 100vh;
    display: grid;
    grid-template-rows: max-content max-content 1fr max-content;
    grid-template-columns: 100%;
}

【讨论】：