Twitter bootstrap 3 Bootstrap3:navbar固定底部根据内容长度有条件隐藏

当显示以下行为时，我希望有一个底部导航条粘在页面底部：

* shown:
    1. When the page content height is smaller than the page height
    2. When the bottom of the page is reached
* hidden:
    When the page content is long enough, i.e. it fills more than the page height and page bottom is not reached

我目前正在使用bootstrap3及其CSS类navbar fixed bottom，但navbar始终可见。我想它被隐藏时，内容足够长

<div class="content">
    CONTENT GOES HERE, length varies depending on the page
</div>

<footer>
    <div class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container">
            <div class="navbar-collapse collapse" id="footer-body">
                <ul class="nav navbar-nav">
                    <li><a href=“#">Link one</a></li>
                    <li><a href=“#">Link two</a></li>
                    <li><a href=“#">Link three</a></li>
                </ul>
                <ul class="nav nav-pills pull-right">
                    <li class="copyright"></li>
                </ul>
            </div>
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#footer-body">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
        </div>
    </div>
</footer>

内容在此处，长度因页面而异

使用jQuery，将100更改为所需的字符限制

$(document).ready(function() {
  var len = $('.content').text().length;

  if(len > 100){
     $('footer').addClass('hidden');
  }
});

---

刚刚更新了我的答案，原来的答案是根据内容长度隐藏内容。更新隐藏页脚。