母版页中的粘滞页脚答案

【问题标题】：Sticky footer in master page母版页中的粘滞页脚
【发布时间】：2014-03-23 13:18:21
【问题描述】：

经过几天的搜索使页脚粘在页面末尾的代码，我终于找到了可行的方法。

但现在我意识到，如果您有特定的分辨率，它只会停留在页面的末尾。如果有人拥有更大的屏幕或正在全视图查看页面，那么它就不再工作了。

请帮忙？

而且，我还知道那些非常著名的粘性页脚网站。似乎无法在这里找到答案我需要有关我的代码的具体帮助。

谢谢！

母版：

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

【问题讨论】：

标签： asp.net css master-pages sticky-footer

【解决方案1】：

为什么不采用标准方法：

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

CSS：

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

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

【讨论】：

这似乎是最合乎逻辑的解决方案。但它不起作用。
我已经在 WebForms 应用程序中对其进行了测试。做了定义。工作。有关详细信息，请参阅 JSFiddle
它是否也适用于母版页？因为这似乎会导致一些问题。你能发布 JSFiddle 吗？
我发布的内容是使用 Asp.net WebForms 中的母版页进行测试的。
我注意到问题是标签
...但我还没有找到解决办法

【解决方案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。

【讨论】：

谢谢。我不得不对其进行一些调整，这是一个有效的链接：c-sharpcorner.com/UploadFile/7dc621/…