如何在我的 WordPress 主题上获得粘性页脚？

Posted 2023-03-05

【中文标题】如何在我的 WordPress 主题上获得粘性页脚？

【英文标题】：How can I get a sticky footer on my WordPress theme?

【发布时间】：2012-09-03 20:54:16

【问题描述】：

我试图让页脚停留在页面底部。我已经关注了大量关于粘性页脚的不同教程（其中大多数非常相似），但没有一个对我有用。由于某种原因，页脚粘在屏幕底部而不是页面...

这是我的 html 中 div 的布局：

<div id="wrapper">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</div>

这是我的 CSS：

html, body 
height: 100%;

#wrapper 
min-height: 100%;
position: relative;


#content 
position: absolute;
padding-bottom: 300px; (same as footer height)


#footer 
width: 100%;
height: 300px;
position: absolute;
bottom: 0px;

【参考方案1】：

试试这个

CSS

html, body 
    margin:0;
    padding:0;
    height:100%;

#wrapper
    min-height:100%;
    position:relative;

#header 
   background:#00ff0f;
   padding:30px;

#main
    padding:10px;
    padding-bottom:45px;   /* Height+padding(top and botton) of the footer */
    text-align:justify;
    height:100%; 

#footer 
    position:absolute;
    bottom:0;
    width:100%;
    height:15px; /* Height of the footer */
    background:#00ff0f;
    padding:10px 0; /*paddingtop+bottom 20*/

​HTML

<div id="wrapper">
    <div id="header">Header</div>
    <div id="main">
        Some Content Here... 
    </div>
    <div id="footer">Footer</div>
</div>​

DEMO.

【讨论】：

它应该有 position:fixed 的浮动效果。我修改了你的小提琴jsfiddle.net/FPCWD/7

在哪里？你给我的小提琴什么也没做！

抱歉，我点击了运行但忘记点击更新来获取新的网址。这是您的更多内容，但 CSS 相同：jsfiddle.net/FPCWD/11。页脚不浮动。我将它从位置：绝对更改为位置：固定在#footer 中，它在这里浮动jsfiddle.net/FPCWD/12

【参考方案2】：

我知道这是旧的，但现在你可以使用允许可变页脚高度的 flex-box

html, body, #wrapper
  min-height: 100vh;

#wrapper
  display: flex;
  flex-direction: column;

#main
  flex-grow: 1;