页面内容较少时如何将页脚粘贴到网站底部？ [复制]答案

【问题标题】：How to Stick Footer to Bottom of the site when Page Content is Less? [duplicate]页面内容较少时如何将页脚粘贴到网站底部？ [复制]
【发布时间】：2019-08-11 21:33:12
【问题描述】：

有时在我的网站上，文本行数很少或内容很少。

在这种情况下，页脚会显示在页面之间某处的内容下方。这不会给页面带来漂亮的外观。

像这样：

当我添加一个 css 时：

.ar-footer{
   position:absolute;
   bottom:0px;
   left:0px;
   right:0px;
   width:100%;
 }

页脚内容已更改。像这样：

如何解决？如果内容更少或更多，我想将页脚部分固定到页面底部。

【问题讨论】：

这里有一些方法：css-tricks.com/couple-takes-sticky-footer
w3schools.com/howto/tryit.asp?filename=tryhow_css_fixed_footer
@Sabbir 您想解释一下为什么列出的选项没有帮助吗？有 5 种不同的选择，你肯定能找到一些东西。或者帮助我们了解缺少哪些特殊元素以提供更好的答案。
因为我已经尝试过这个，它唯一的显示是在页脚上添加高度。实际上它不适用于我的问题。 @BryceHowitson
你能看看我已经用position: absolute; bottom: 0; 尝试过的问题吗？我显示了错误。 @BryceHowitson

标签： php html css wordpress

【解决方案1】：

如果您有主要内容的 CSS 添加

#maincontent{
flex-grow: 1;
}

如果没有，您可以尝试将其添加到正文标签 [不确定这是否有效]

body{
flex-grow: 1;
}

这将强制你的内容占据整个显示并且你的页脚应该贴在底部

【讨论】：

【解决方案2】：

像这样构建您的基本 HTML 标记：

<body>
  <header></header>
  <div id="wrap"></div>
  <footer></footer>
</body>

然后在你的css中添加

#wrap {
  min-height: 100%;
}

超级简单，适用于所有浏览器。在#wrap 中添加所有其他标记。如果有帮助，您还可以将标题放在包装内。只需确保换行在页脚之前。

【讨论】：