bootstrap - липкий нижний колонтитул, где положение не зафиксировано, получает странную линию на странице

У меня есть липкий нижний колонтитул, и я менял его несколько раз, потому что постоянно сталкивался с различными проблемами. Причина, по которой у меня такой код, заключается в том, что в предыдущих попытках, когда содержимое заполняло страницу, на мобильном устройстве нижний колонтитул становился выше, чтобы разместить расположенные друг над другом кнопки, и он перекрывал содержимое. В других версиях, которые я пробовал, нижний колонтитул добавлялся в конец блока содержимого, но он был бы на полпути вверх по странице, если бы содержимое занимало только половину страницы. Эта текущая версия, которая у меня есть, отлично работает, за исключением того, что в поле содержимого есть странная линия, где, как я предполагаю, находится заполнитель нижнего колонтитула, хотя нижний колонтитул прилипает к нижней части. Кто-нибудь может мне помочь? У меня есть скрипка здесь: http://jsfiddle.net/7sPN6/1/. Я также хочу уточнить, что панель становится видимой только тогда, когда высота браузера выше. Я также хотел объяснить, что в моем css я установил относительное положение нижнего колонтитула, чтобы иметь возможность прокручивать содержимое, чтобы оно не перекрывалось нижним колонтитулом.

<!-- ------- wrap ------- -->
<div id="wrap">
<div id="main">
    <!-- ------- begin header ------- -->
    <div id="header"> 
        <div class="row">
            <div class="col-xs-4">
                <div class="brand img-responsive" style="margin-left: 10px">logo
                </div>
            </div>

            <div class="col-xs-3">
            </div>

            <div class="col-sm-5 text-right">
                <div class="brand"> Portal
                </div>
            </div>
        </div>

        <!-- ------- make logo smaller on smaller screens ------- -->
         <div class="row">
            <div class="col-sm-9 hidden-lg hidden-md">
                <div class="logo">        
                    <a class="logo"><img src="img/logosm.png" class="img-responsive"></a> 
                </div>
            </div> 

            <div class="col-sm-3">                       
            </div>
          </div>
  <hr>
</div>


<!-- ------- content ------- -->  
    <div class="container">
        <div class="span3">
            <div class="box">
            <h2 class="intro-text text-center">Announcements</h2>
                <hr>
                <ul>
                    <li>blah blah blah</li>
                    <li>blah blah blah</li>
                    <li>blah blah blah</li>
                    <li>blah blah blah</li>
                    <li>blah blah blah</li>
                </ul>
            </div>
        </div>
    </div><!-- /.container -->

</div><!-- /.main -->
</div><!-- ------- end wrap ------- -->

<!-- ------ begin footer-------- -->
<div id="footer">
<div class="row navbar-inverse navbar-justified navbar-fixed-bottom row-fluid">
    <div class="col-sm-12 text-center"><!-- centers buttons on screen -->
        <ul class="nav navbar-nav">
            <li><button type="button" class="btn btn-sm fixed_button"><i class="icon-bug"></i>  Submit Bugs</button></li>
            <li><button type="button" class="btn btn-sm fixed_button"><i class="icon-lightbulb"></i> Feature Requests</button></li>
            <li><button type="button" class="btn btn-sm fixed_button"><i class="icon-envelope-alt"></i> Contact</button></li>
        </ul>
    </div>
</div>

</div>

<!-- ------- end footer ------- -->