强制页脚到我的wordpress的短页面的底部 [英] force footer to bottom of page for short pages in my wordpress
问题描述
我有一个网站，我仍然在玩和编辑，但我有点失去了试图使页脚粘在屏幕底部。
我尝试了ryanfait选项（ http://ryanfait.com） / resources / footer-stick-to-bottom-of-page / ），但我看不到如何使其与当前主题一起使用。
我然后尝试了一种不同的方法使用绝对位置等，但它将页脚放在我的长页面的页面中间，这样清楚无法工作。
我当前的网站是： http://goo.gl/PO3OYo ，您可以在首页看到我的意思是什么意思的页脚不是...
我的网站html基本上是这样：
< body>
< div id =wrap>
< div id =header>< / div
< div id =nav>< / div>
< div id =inner>< / div>
< div id =footerclass =footer>< / div>
< / div>
且CSS为
* {
margin：0;
}
html {
margin：0;
padding：0;
height：100％;
}
body {
background：＃000000 url（images / bg.jpg）top center no-repeat;
color：＃444444;
font-size：12px;
font-family：'Lucida Grande'，'Lucida Sans Unicode'，Arial，Helvetica，sans-serif;
margin：0 auto 0;
padding：0;
line-height：21px;
height：100％;
}
#wrap {
height：auto！important;
margin：0 auto;
min-height：100％;
padding：0;
position：relative; * /我试过这个，但它打破长页* /
}
#inner {
background：#FFF;
width：900px;
margin：0 auto 0;
padding：30px;
overflow：hidden;
}
#footer {
background：＃161616;
color：＃666666;
margin：0 auto 0;
padding：20px，0，0，0;
clear：both;
overflow：hidden;
border-top：1px solid＃222222;
height：40px;
bottom：0;
left：0;
width：100％;
position：absolute; * /我试过，但它打破长页* /
}
来到花花公子，你太近了！ p>
确保您遵循相同的结构：
< body&
< div id =wrap>
< div id =header> fdsf< / div>
< div id =nav> ffd< / div>
< div id =inner>
content here ...
< / div>
< div class =push>< / div>
< / div>
< div id =footerclass =footer> footer< / div>
< / body>
然后从ryan fait的
#wrap {
min-height：100％;
height：auto！important; / *这行和下一行不是必需的，除非你需要IE6支持* /
height：100％;
margin：0 auto -155px; / *底部边距是页脚高度的负值* /
}
.footer，.push {
height：155px; / * .push必须与.footer相同的高度* /
}
#footer {
background：＃161616;
color：＃666666;
margin：0 auto 0;
padding：20px，0，0，0;
clear：both;
overflow：hidden;
border-top：1px solid＃222222;
width：100％;
}
示例：
http://codepen.io/EightArmsHQ/pen/YPymWV
真的建议有一个关于我的代码在Codepen，只是为了抓住它。我粘到每一个脚步我做过，并且仍然得到我更好的一些时间，所以只是保持它。也总是会出现上述情况不适当的情况...
I've got a website which I'm still playing with and editing however I'm a little lost with trying to make a footer stick to the bottom of the screen.
I tried ryanfait option (http://ryanfait.com/resources/footer-stick-to-bottom-of-page/) but I cannot see how to make it work with my current theme.
I then tried a different method using absolute position etc but it placed the footer in the middle of the page on my long pages so clearly that wont work.
My current site is: http://goo.gl/PO3OYo and you can see on the front page what I mean about the footer not being right...
My site html is basically this:
<body>
<div id="wrap">
<div id="header"></div
<div id="nav"></div>
<div id="inner"></div>
<div id="footer" class="footer"></div>
</div>
and the CSS is
* {
margin: 0;
}
html {
margin: 0;
padding: 0;
height:100%;
}
body {
background: #000000 url(images/bg.jpg) top center no-repeat;
color: #444444;
font-size: 12px;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, sans-serif;
margin: 0 auto 0;
padding: 0;
line-height: 21px;
height:100%;
}
#wrap {
height:auto !important;
margin:0 auto;
min-height:100%;
padding:0;
position: relative; */ I tried this but it breaks long pages */
}
#inner {
background: #FFF;
width: 900px;
margin: 0 auto 0;
padding: 30px;
overflow: hidden;
}
#footer {
background: #161616;
color: #666666;
margin: 0 auto 0;
padding: 20px, 0, 0, 0;
clear: both;
overflow: hidden;
border-top: 1px solid #222222;
height: 40px;
bottom: 0;
left: 0;
width: 100%;
position: absolute; */ I tried this but it breaks long pages */
}
Do you have any ideas how I can get it to work without the position: absolute?
Come on dude, you were so close!
Make sure you follow the same structure:
<body>
<div id="wrap">
<div id="header">fdsf</div>
<div id="nav">ffd</div>
<div id="inner">
content here...
</div>
<div class="push"></div>
</div>
<div id="footer" class="footer">footer</div>
</body>
Then from ryan fait's
#wrap {
min-height: 100%;
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
#footer {
background: #161616;
color: #666666;
margin: 0 auto 0;
padding: 20px, 0, 0, 0;
clear: both;
overflow: hidden;
border-top: 1px solid #222222;
width: 100%;
}
Example: http://codepen.io/EightArmsHQ/pen/YPymWV
I'd really advise having a muck about with my code in Codepen, just to get to grips with it. I sticky footer every footer I've ever made, and it still gets the better of me some times so just keep at it. There will also always be occasions when the above doesn't quite work...
这篇关于强制页脚到我的wordpress的短页面的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
