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，如下所示：

FIDDLE ＆lt; - 内容很少 FIDDLE ＆lt; - 包含大量内容

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/

设置页面底部的页脚

4 个答案: