如何使页脚粘在页面底部

Question

我已阅读有关如何在网页底部制作页脚的所有教程，但我仍然无法为我的网站制作。

我提到的链接是

• How do you get the footer to stay at the bottom of a Web page?

• Making my footer stick to bottom of the page

• Ways to stick footer to the bottom a page

• making the footer stick the bottom

都没有用..！

CSS

#footer1 {
clear: both;
background-color: #333;
width: 1200px;
min-width: 100%;
width: 100%;
bottom: 0;
position: relative;
height: 50px;
border-top:5px solid #1b9bff;
}

这是我网站的虚拟小提琴

Fiddle

这是我尝试过的小提琴，但其中也有一个错误

1. http://jsfiddle.net/andresilich/fVpp2/1/

Answer 1

按照this method 的代码 - 您需要：

1) 将页脚放在表单外

2) 添加高度：表单上的 100%

3) 根据页脚的高度设置负底边距。

form {
    min-height: 100%;
    height: 100%;
    margin: 0 auto -150px; /*footer 150px high */
}

Modified Fiddle

Answer 2

添加/编辑如下

#body {
margin-bottom: 85px;
position: relative;
}

#footer1 {
position: fixed;
}

我想这就是你想要的

* html #form1 {
    height:100%; 
}

#form1 {
    min-height: 100%;
    position: relative;
}

#body {
    padding-bottom: 50px; /* padding-bottom should be equal to the footer height (this keeps the footer from overlapping the content) */
}

#footer1 {
    position: absolute;
    width: 100%;
    clear: both;
    bottom: 0;
    padding: 0;
    margin: 0;
}

Answer 3

试试这个：

<div id="container">
  <div id="content"></div>
</div>
<div id="footer">My Sticky Footer</div>

CSS：

html, body, #container { height: 100%; }
body > #container { height: auto; min-height: 100%; }

#footer {
   clear: both;
   position: relative;
   z-index: 10;
   height: 3em;
   margin-top: -3em;
}

#content { padding-bottom: 3em; }