Javascript 如何使页脚始终位于页面底部？_Javascript_Jquery_Html_Css_Asp.net

Javascript 如何使页脚始终位于页面底部？

javascript jquery html css asp.net

Javascript 如何使页脚始终位于页面底部？,javascript,jquery,html,css,asp.net,Javascript,Jquery,Html,Css,Asp.net,如果页面上的内容较少，那么页脚将停留在页面的中间而不是底部。我只是想页脚将始终留在页面的底部后，所有的页面内容。我尝试了不同的方法，在堆栈中找到了一些解决方案，但没有一个能满足我的需要。大多数职位的年龄为3/4岁。所以，我想知道是否有人有任何有效的解决方案，工作良好。我正在使用asp.net。我不擅长css，所以可能是我做错了什么。我的页面格式是这样的- <html> <head> <body> <form>

如果页面上的内容较少，那么页脚将停留在页面的中间而不是底部。我只是想页脚将始终留在页面的底部后，所有的页面内容。我尝试了不同的方法，在堆栈中找到了一些解决方案，但没有一个能满足我的需要。大多数职位的年龄为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>


xxxxx

这只是我的页面框架。如果有人能给我一些建议，我将不胜感激

将此添加到css中：

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

在css中

为了实现您需要的功能，请使用以下基本结构：

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

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

#container {
   height:100%;
}

请参阅这些关于粘性页脚的教程中的任何一个：这样做不需要javascript/jquery。

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

#container {
   height:100%;
}