Question

如果页面上的内容较少，则页脚会停留在页面中间而不是底部。我只想让页脚在页面的所有内容之后始终保持在页面底部。我尝试了不同的方法，在堆栈中找到了一些解决方案，但没有一个按照我的需要工作。大多数帖子都是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>

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

Answer 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%;
}

Answer 2

在css中

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

Answer 3

将此添加到您的css：

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

如何将页脚始终保持在页面底部？

3 个答案: