Question

经过几天搜索一些使页脚粘到页面末尾的代码，我终于发现了一些有用的东西。

但是现在我意识到，如果你有特定的分辨率，它只会粘在页面的末尾。如果有人拥有更大的屏幕或者在全视图中查看页面，那么它就不再起作用了。

请帮忙吗？

而且，我知道那些着名的粘性页脚网站。似乎无法在这里找到答案我的代码需要特定的帮助。

谢谢！

母版：

<form id="form1" runat="server">
    <div class="page">
        <div class="header">
        </div>

        <div class="main">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                <div class="wrapper" />
            </asp:ContentPlaceHolder>
        </div>

        <asp:ContentPlaceHolder ID="FooterPlaceHolder" runat="server">
        </asp:ContentPlaceHolder>
    </div>
</form>

CONTENTPAGE aspx

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <h2>Knowledge Base</h2>

    <div class="push"></div>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="FooterPlaceHolder" Runat="Server">
    <div class="footer">
        &copy; "companyName"
    </div>
</asp:Content>

CSS：

html {
    height: 100%;*/
}
body
{
    height: 100%;
    margin: 0px;
}
.page
{
    width: 1200px;
    margin: auto;
    height: 100%;
}
.main
{
    text-align: left;
    padding: 5px 15px;
    margin-top: 10px;
}
.footer
{
    text-align: center;
}
.wrapper
{
    min-height: 100%;
    height: auto !important; 
    height: 100%;
    margin: 0px auto -449px; 
}
.push 
{
    clear: both;
    height: 449px;
}

Answer 1

为什么不采用标准方法：

<footer>
      <p>&copy; <%: DateTime.Now.Year %> - Sometext</p>
</footer>

的CSS：

footer {
    display: block;
    position: absolute;
    bottom: 10px;
}

修改：JSFiddle。完全相同的代码。无论您以何种方式调整浏览器窗口大小，页脚始终位于底部。

Answer 2

就个人而言，我使用以下代码解决了这个问题。将它放在母版页的头元素中：

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>  
<script type="text/javascript">  
   $(window).bind("load", function () {  
       var footer = $("#footer");  
       var pos = footer.position();  
       var height = $(window).height();  
       height = height - pos.top;  
       height = height - footer.height();
       if (height > 0) {  
           footer.css({  
               'margin-top': height + 'px'  
           });  
       }  
   });  
</script>
</head>

之后，在下面的div中插入任何自定义页脚，这样就可以了。

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

它还可以很好地调整页脚的内容。我找到了这个解决方案here。

主页中的粘滞页脚

2 个答案: