jquery - 无论如何检查容器高度并相应地更改 CSS？

Question

比方说，我有一个占据页面 100% 的容器，然后在底部(作为该容器的一部分)有一个页脚。页脚位于 left:0px 和 bottom:0px。

有没有办法，例如使用 JQuery，来检查该容器的高度，如果它低于一定数量，则删除页脚上将其定位在 0px 0px 处的 css？

示例 html:

<div class="container">
    <div class="footer">
    </div>
</div>

示例 CSS:

.container { width:100%; }
.footer { height:42px; position:absolute; bottom:3px; left:0px; width:100%; }

Answer 1

您可以使用 jQuery 执行此操作，如下所示:

var $containerHeight = $('.container').height();
if(height < yourMagicNumberHere) {
  $('.footer').css({
    position: 'static',
    bottom: 'auto',
    left: 'auto'
  });
}