如何使用动态高度网站将页脚保持在底部

小编典典

如何使用动态高度网站将页脚保持在底部

css

当我有一个页面可以通过CSS动态设置高度（例如，从数据库获取信息）时，如何将页脚div始终保持在窗口底部？

如果您想使用jQuery，我想出了这一点并且效果很好：

设置页脚的CSS：

#footer { position:absolute; width:100%; height:100px; }

设置脚本：

<script>
  x = $('#div-that-increase-height').height()+20; // +20 gives space between div and footer
  y = $(window).height();    
  if (x+100<=y){ // 100 is the height of your footer
    $('#footer').css('top', y-100+'px');// again 100 is the height of your footer
    $('#footer').css('display', 'block');
  }else{
    $('#footer').css('top', x+'px');
    $('#footer').css('display', 'block');
  }
</script>

该脚本必须位于代码的末尾。

阅读 244

2020-05-16

共1个答案

小编典典

我相信您正在寻找 粘性页脚

从上面的文章：

layout.css：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

html页面：

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

2020-05-16