页面底部的固定页脚 [英] Fixed footer at bottom of page

问题描述

我想在页面底部有一个固定页脚，其中可以有一行文本（所有文本居中），就像这样。

这是我目前的代码。

我尝试过使用其他教程，但无

解决方案

我建议使用 Ryan Fait的粘滞页脚。

$ b

 < div class =wrapper> 
 Content Here 
< div class =push>< / div> 
< / div> 
< div class =footer>< / div> 
  

CSS：

 code> * {
 margin：0; 
} 
 
 html，body {
 height：100％; 
} 
 
 .wrapper {
 min-height：100％; 
 height：auto！important; 
 height：100％; 
 margin：0 auto -142px; / *底部边距是页脚高度的负值* / 
} 
 
 .footer，.push {
 height：142px; / * .push必须与.footer相同的高度* / 
} 
 
 .footer {/ *居中文本* / 
 text-align：center; / * horizo​​ntal centering * / 
 line-height：142px; / *垂直对中;应该等于页脚高度* / 
} 
  

I want a fixed footer at the bottom of my page where I'm able to have one line of text (all text centered), just like this.

This is my current code.

I've tried using other tutorials, but none have worked.

How can I do this?

解决方案

I would recommend using Ryan Fait's sticky footer. It can accomplish what you are trying to do with pure CSS.

HTML:

<div class="wrapper">
    Content Here
    <div class="push"></div>
</div>
<div class="footer"></div>

CSS:

* {
    margin: 0;
}

html, body {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}

.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

.footer { /* centers the text */
    text-align: center; /* horizontal centering */
    line-height: 142px; /* vertical centering; should be equal to the footer height */
}

这篇关于页面底部的固定页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！