我如何得到一个粘性页脚在我的WordPress主题？ [英] How can I get a sticky footer on my WordPress theme?

问题描述

我想让我的页脚停留在我的网页底部。我在粘性页脚上追踪了不同的教程（大多数都非常相似），但没有一个为我工作。由于某些原因，页脚停留在SCREEN的底部，而不是PAGE ...

这是我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 {
位置：absolute; 
 padding-bottom：300px; （与页脚高度相同）
} 
 
 #footer {
 width：100％; 
 height：300px; 
 position：absolute; 
 bottom：0px; 
} 
  

解决方案

CSS

  html，body {
边距：0; 
 padding：0; 
 height：100％; 
} 
 #wrapper {
 min-height：100％; 
 position：relative; 
} 
 #header {
 background：＃00ff0f; 
 padding：30px; 
} 
 #main {
 padding：10px; 
 padding-bottom：45px; / *页脚的高度+填充（顶部和底部）* / 
 text-align：justify; 
 height：100％; 
} 
 #footer {
 position：absolute; 
 bottom：0; 
 width：100％; 
 height：15px; / *页脚高度* / 
 background：＃00ff0f; 
 padding：10px 0; / * paddingtop + bottom 20 * / 
} 
  

HTML

 < div id =wrapper> 
< div id =header>标头< / div> 
< div id =main> 
一些内容在这里... 
< / div> 
< div id =footer> Footer< / div> 
< / div> 
  

DEMO 。

I'm trying to get my footer to stick to the bottom of my page. I've followed loads of different tutorials (most of them very similar) on sticky footers, but none of them have worked for me. For some reason the footer sticks to the bottom of the SCREEN instead of the PAGE...

This is the layout of divs in my HTML:

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

This is my 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;
}

解决方案

Try this

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.

这篇关于我如何得到一个粘性页脚在我的WordPress主题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！