Question

当我有一个动态设置高度的页面（例如，从数据库获取信息）时，如何将页脚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>

此脚本必须位于代码的末尾;

Answer 1

我认为这将解决您的所有问题：

    <script>

  $(document).ready(function() {

   var docHeight = $(window).height();
   var footerHeight = $('#footer').height();
   var footerTop = $('#footer').position().top + footerHeight;

   if (footerTop < docHeight) {
    $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
   }
  });
 </script>

您至少需要一个`#footer`

的元素

如果内容适合屏幕不想要滚动条，只需将10的值更改为0即可如果内容不适合屏幕，滚动条将显示。

Answer 2

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

试试这个：http://ryanfait.com/sticky-footer/

从上面的文章：

的 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>

Answer 3

我最喜欢的粘性页脚（非固定）的jQuery / CSS解决方案是：

<强> CSS：

html {
    position: relative;
    min-height: 100%;
}
footer {
    display:none;
    position: absolute;
    left: 0;
    bottom: 0;
    height: auto;
    width: 100%;
}

<强> jQuery的：

function footerAlign() {
  $('footer').css('display', 'block');
  $('footer').css('height', 'auto');
  var footerHeight = $('footer').outerHeight();
  $('body').css('padding-bottom', footerHeight);
  $('footer').css('height', footerHeight);
}


$(document).ready(function(){
  footerAlign();
});

$( window ).resize(function() {
  footerAlign();
});

<强>样本： http://codepen.io/anon/pen/ZQxQoR

注意：您的页脚必须以<footer>开头，以</footer>结尾才能按原样使用此代码，或者您可以修改代码以匹配您的页脚ID /类。

Answer 4

因此是一个简单的解决方案

CSS：

.footer_wrapper {  width:100%;     background-color:#646464; }
.footer_wrapper.fixed {position:fixed; bottom:0px;}

JS：

if ($(".Page").height()<$(window).height()){
        $(".footer_wrapper").addClass("fixed");
    }else{
        $(".footer_wrapper").removeClass("fixed");
    }

HTML：

<div class="Page"> 

        /* PAGE CONTENT */

        <div class="footer_wrapper" >

            /* FOOTER CONTENT */

        </div>
    </div>

Answer 5

使用以下内容在您的网页上制作固定的页脚：

<强> CSS：

body, html
{
    margin: 0px; padding: 0px;
}

#footer
{
    width: 100%;
    height: 30px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    /*text-align, background-color, and other specific styles can be applied here. You can change the height from 30px to anything which suits your needs. You can even comment Left: 0px & Right: 0px, but to make sure that it works in all browsers, lets leave them there.*/
}

<强> HTML：

/*Place this div anywhere on the page, inside the form tags.*/
<div id="footer">
/*Your text/elements goes here*/
</div>

希望这有帮助！

干杯，

静脉

Answer 6

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

查看工作样本，

http://jsfiddle.net/RC3YX/

Answer 7

不确定这是否是您要找的：

<div style="position: fixed; bottom: 0px; left: 0px; right: 0px;">footer</div>

Answer 8

见这两篇文章。 http://ryanfait.com/sticky-footer/和 http://css-tricks.com/snippets/css/fixed-footer/

Answer 9

我正在检查这个问题以找到相同的答案。有人问过这个问题，也许这是jQuery添加的新功能。但这是一个现在存在的简单修复：

如果您使用的是jQuery，只需将data-position =“fixed”添加到div标签。

http://demos.jquerymobile.com/1.2.0/docs/toolbars/bars-fixed.html

<div data-role="footer" data-position="fixed">
        <h5>footer - page 3</h5>
        </div><!-- /footer -->

希望这有帮助。

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

9 个答案:

您至少需要一个`#footer`

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

9 个答案:

您至少需要一个#footer

您至少需要一个`#footer`