在页面上的力量页脚与少量内容 [英] force footer on bottom on pages with little content

问题描述

我有一个只有几行内容的页面。我想将页脚推到底部。

 < div id =footer>< / div> 
  

我不想使用

  #footer 
 {
 position：fixed; 
 bottom：0; 
} 
  

AKA 粘性页脚
$ b

没有jQuery，这是否可能？

有没有建议？

方案

还有一个不使用位置固定的粘性页脚。

http://ryanfait.com/sticky-footer/

  * {
 margin：0; 
} 
 html，body {
 height：100％; 
} 
 .wrapper {
 min-height：100％; 
 height：auto！important; / *这行和下一行不是必需的，除非你需要IE6支持* / 
 height：100％; 
 margin：0 auto -155px; / *底部边距是页脚高度的负值* / 
} 
 .footer，.push {
 height：155px; / * .push必须与.footer相同的高度* / 
} 
 
 / * 
 
 Ryan Fait的粘性页脚
 http：// ryanfait.com/ 
 
 * / 
  

I have a page with only a couple of lines of content. I want the footer to be pushed to the bottom.

<div id="footer"></div>

I don't want to use

#footer
{
    position:fixed;
    bottom:0;
}

AKA Sticky Footer

Is this possible without jQuery?

any suggestions?

解决方案

There is another sticky footer that doesn't use position fixed.

http://ryanfait.com/sticky-footer/

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    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 */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

这篇关于在页面上的力量页脚与少量内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！