如何将页脚固定在页面底部

Posted 2023-05-18

参考技术A 让我们实现了页脚永远固定在页面底部的效果，但我们都额外增加了html标签来实现效果。如果你省略
了这些HTML标签，再要实现效果就比较困难了，那么此时使用jQuery或javascript方法来帮助实现是一种很好的办法，下面我们就一起来看，通过jQuery来实现页脚永远固定在页面底部的效果。
HTML Markup

<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
<div id="right">Right Content</div>
</div>
<div id="footer">Footer Section</div>

这里我们没有增加没用的HTML标签，此时你也可以随时在body中增加内容，只要确保div#footer是在body最后面。

<div id="footer">Footer Section</div>

CSS Code

*margin: 0;padding:0;
.clearfix:before,
.clearfix:after
content:"";
display:table;

.clearfix:after
clear:both;

.clearfix
zoom:1; /* IE <8 */


#footer
height: 60px;
background: #fc6;
width: 100%;

/*==========其他div==========*/
#header
padding: 10px;
background: lime;

#left
width: 18%;
float: left;
margin-right: 2%;
background: orange;

#content
width: 60%;
float: left;
margin-right: 2%;
background: green;

#right
width: 18%;
float: left;
background: yellow;


这个方法不像前面三种方法靠CSS来实现效果，这里只需要按正常的样式需求写样式，不过有一点需要特别注意在html,body中不可以设置高度height为100%，否则此方法无法正常运行，如果你在div#footer中设置了一个高度并把宽度设置为100%将更是万无一失了。

jQuery Code

<script type="text/javascript">
// Window load event used just in case window height is dependant upon images
$(window).bind("load", function()
var footerHeight = 0,
footerTop = 0,
$footer = $("#footer");
positionFooter();
//定义position Footer function
function positionFooter()
//取到div#footer高度
footerHeight = $footer.height();
//div#footer离屏幕顶部的距离
footerTop = ( $(window).scrollTop()+$(window).height()-footerHeight)+"px";
/* DEBUGGING STUFF
console.log("Document height: ", $(document.body).height());
console.log("Window height: ", $(window).height());
console.log("Window scroll: ", $(window).scrollTop());
console.log("Footer height: ", footerHeight);
console.log("Footer top: ", footerTop); console.log("-----------")
*/
//如果页面内容高度小于屏幕高度，div#footer将绝对定位到屏幕底部，否则div#footer保留它的正常静态定位
if ( ($(document.body).height()+footerHeight) < $(window).height())
$footer.css(
position: "absolute"
).stop().animate(
top: footerTop
);
else
$footer.css(
position: "static"
);


$(window).scroll(positionFooter).resize(positionFooter);
);
</script>

使用上面的jQuery代码，可以轻松的帮我们实现页脚永远固定在页面底部，使用这种方法有几个地方需要注意

1. 确保正常引入了jQuery版本库，并正常调入了上面那段jQuery代码；

2. 确保<div id=”footer”>是在body中最后；

3. 确保在html,body中没有设置高度为100%。

优点：

结构简单，无需外加无用标签，兼容所有浏览器，不用另外写特别样式。页脚可以不固定高度。

缺点：

在不支持js的浏览器中无法正常显示，另外每次改变浏览器大小会闪动一下。本回答被提问者采纳

将页脚粘贴到页面底部的方法

【中文标题】将页脚粘贴到页面底部的方法

【英文标题】：Ways to stick footer to the bottom a page

【发布时间】：2011-01-22 04:47:29

【问题描述】：

我关注了 How do you get the footer to stay at the bottom of a Web page? 在 *** 上的帖子...

但我无法让它在 asp.net web 应用程序中工作......我正在为所有页面使用母版页......

如何让页脚贴在页面底部？

供参考：

<table  cellpadding="0" cellspacing="0">
<tr>
<td>
<table  cellpadding="0" cellspacing="0" class="bgpatt">
<tr style="height:25px;">
<td style="width:40%">

</td>
<td  style="width:30%">

</td>
<td style="width:30%;" valign="top">

  <div id="headermenu" style="width:300px;"><ul style="width:300px;">
            <li><a title="Home" href="#" class="headerhome">Home</a></li>
            <li><a title="About Us" href="#" class="aboutus">About Us</a></li>
            <li><a title="Contact Us" href="#" class="contactus">Contact Us</a></li>
            <li><a title="Feedback" href="#" class="feedback">Feedback</a></li>
            <li><a title="Logout" href="#" class="logout">Logout</a></li>     
            </ul></div>
    </td>
</tr>
<tr style="height:25px;">
<td colspan="3">

</td>
</tr>
<tr style="height:25px;">
<td colspan="3">

</td>
</tr>
</table>
 </td>
 </tr>
<tr valign="top">
<td>
<table  cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <table  cellpadding="0" cellspacing="0">



        <tr style="height:5px; background-color:#404040;">
            <td colspan="3" valign="top" style="width:100%">
                </td>
        </tr>
             </table>
                </td>
        </tr>
    </table>
</td>
</tr>
<tr>
<td>
 <table  cellpadding="0" cellspacing="0">
    <tr>
    <td style="width:45%;">

    </td>
    <td style="width:45%;">
   <div id="header" style="width:300px;"><ul id="mainMenu" runat="server">
                <li id="mainHome" runat="server"><a href="#" title="Home" class="home"><span></span>Home</a></li>
                <li id="mainManage" runat="server"><a href="Users.aspx" title="Manage" class="manage"><span></span>Manage</a></li>
                <li id="mainEnquiry" runat="server"><a href="account.aspx" title="Enquiry" class="enquiry"><span></span>Enquiry</a></li>
                <li id="mainReport" runat="server"><a href="EnquiryReport.aspx" title="Report" class="report"><span></span>Report</a></li>  

             </ul>       

</div>


    </td>
    <td style="width:10%;">

    </td>
    </tr>
    </table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" >
<tr valign="top">
<td style="width:1px;"><div style="width:1px; height:450px;"></div></td>
<td style="width:95%">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

    </asp:ContentPlaceHolder>
</td>
<td style="width:5%">
<asp:ContentPlaceHolder id="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div class="wrapper"></div>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0"  style="height:25px;">
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
 <table border="0" cellpadding="0" cellspacing="0"  style="height:35px; top:10px;" class="footer">

                                        <tr>

                                        <td style="width:100%;" align="center">


                                            <a href="#" class="footer">Home </a>|

                                            <a href="#" class="footer">About us </a>|

                                            <a href="#" class="footer">Contact us </a>|

                                            <a href="#" class="footer">Feedback </a>

                                            </td> 

                                              </tr>


                                            <tr>
                                            <td style="width:100%;" align="center" class="footer_text">
                                             Copy Rights Xavytechnologies

                                            </td>      

                                            </tr>


                                     </table>
</td>
</tr>
</table>

【参考方案1】：

我建议使用 div 之类的

<div id="Footer"> content </div>

然后在你的css中放这个

#Footer

    position: absolute;
    bottom: 0px;
    height: 3px;
    background-color: #666;
    color: #eee;

或者你可以使用 AjaxControlToolkit 库

---

我也强烈建议您将布局从 Table 更改为 div

【参考方案2】：

我也推荐使用浮动的 div 结构。

标记：

<div class="bodyWrap">
  <div class="header">
    <!-- Insert content here -->
  </div>
  <div class="content">
    <!-- Insert content here -->
  </div>
  <div class="footer">
    <!-- Insert content here -->
  </div>
  <div style="clear:both"></div>
</div>

CSS：

.bodyWrap

 width: 500px;

.header, .content, .footer

 width: 100%;
 float:left;

【参考方案3】：

我更喜欢下面。它只适用于一个 id 而不是一个类。

<div id="Footer"> content </div>    
#Footer 
                    position: fixed;
                    bottom: 0px;