在页面底部设置页脚

Question

我的网站页面大小不同

如何将页脚始终设置在页面底部？

请注意，我需要它在页面底部而不是屏幕底部，因此，如果我有短屏，它将位于它的底部；如果我有长屏，则滚动页面，我将看到仅当我向下滚动时才显示页脚。

谢谢

<footer>
    <?PHP include "footer.php"; ?>
</footer>

CSS：

footer {
    background: #294a2d; 
    width:100%;
    height: 180px; 
    color: #fff;
    margin-top: 50px;
}

Answer 1

您可以使用position:absolute; 在页脚和min-height上，在body标签上是这样的：

FIDDLE <-内容很少FIDDLE <-内容很多

HTML：

<div>... Content ...</div>
<footer>... Footer ...</footer>

CSS：

   html{
    height:100%;
    width:100%;
    margin:0;
}
body {
    width:100%;
    min-height:100%;
    margin:0;
    position:relative;
}
div {
    padding-bottom:100px;
}
footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:100px;
    background:gold;
}

Answer 2

你应该用这个

footer {
position : absolute ;
bottom : 0 !important ;
background: #294a2d; 
width:100%;
height: 180px; 
color: #fff;
margin-top: 50px;
}

Answer 3

尝试这个

html {
   position: relative;
   min-height: 100%;
}

body {
   margin: 0 0 100px; /* bottom = footer height */
   padding: 25px;
}


footer {
  background-color: green;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
  overflow:hidden;
}

<footer> <h1>Footer Content</h1> </footer>

Answer 4

我使用ryan fait的粘性页脚：

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