如何使页脚始终位于页面底部？ [复制]答案

【问题标题】：How to keep the footer always at the bottom of the page? [duplicate]如何使页脚始终位于页面底部？ [复制]
【发布时间】：2014-07-05 08:31:05
【问题描述】：

如果页面上的内容较少，则页脚将停留在页面中间而不是底部。我只希望页脚在页面的所有内容之后始终保持在页面底部。我尝试了不同的方法，并在堆栈中找到了很少的解决方案，但它们都没有按照我的需要工作。大多数帖子都有 3/4 年的历史。所以，我想知道是否有人有任何可以正常工作的有效解决方案。我正在使用 asp.net。我不擅长 css，所以可能是我做错了什么。我的页面格式是这样的-

<html>
    <head>
    <body>
        <form>
            <div class="clear">
                <div class="container">
                    <ucl:headercontrol />
                    <asp:updatePanel>
                    </asp:updatePanel>
                </div>
            </div>
            <div class="footer">
                <p>xxxxx</p>
            </div>
        </form>
    </body>
</html>

这只是我的页面骨架。如果有人能给我任何想法，我将不胜感激。

【问题讨论】：

查看以下任一关于粘性页脚的教程：cssstickyfooter.com/using-sticky-footer-code.html AND css-tricks.com/snippets/css/sticky-footer
javascript/jquery 不需要这样做。

标签： javascript jquery html css asp.net

【解决方案1】：

为了实现你所需要的使用这个基本结构：

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

还有以下 CSS：

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

您甚至可以添加一点 CSS 以确保它在所有浏览器中向后兼容：

#container {
   height:100%;
}

【讨论】：

【解决方案2】：

在css中

div.footer {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  height: 50px;
}

【讨论】：

【解决方案3】：

将此添加到您的 CSS：

html, body, form{ height:100%; }
.clear { height:90%;}
.footer { height: 10%;}

【讨论】：