2016-06-13 3 views
0

Я использую Bootstrap 3.3.5 для отображения нижнего колонтитула внизу веб-страниц с использованием класса .navbar navbar-default. На страницах, отображающих список элементов более 10, нижний колонтитул отображается в нижней части страницы, но на страницах с менее чем 5 элементами нижний колонтитул отображается в середине страницы, а не внизу.Bootstrap Footer не прилипает к нижней части страницы

HTML код ..

<nav class="navbar navbar-default" style="margin-bottom:0px;padding-botton:0px"> 
      <div class="container-fluid"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbarBottom"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span>       
       </button> 
       <div class="collapse navbar-collapse" id="myNavbarBottom"> 
        <ul class="nav navbar-nav navbar-center"> 
         <li><a href="https://www.linkA.com"><span class="glyphicon glyphicon-th-large"></span> About</a></li> 
         <li><a href="https://www.linkB.com"><span class="glyphicon glyphicon-pencil"></span> Blog</a></li> 
         <li><a href="https://www.linkC.com"><span class="glyphicon glyphicon-road"></span> How It Works</a></li> 
         <li><a href="https://www.linkD.com"><span class="glyphicon glyphicon-certificate"></span> Credits</a></li> 
         <li><a href="https://www.linkE.com"><span class="glyphicon glyphicon-earphone"></span> Contact</a></li> 
         <li><a href="https://www.linkF.com" target="_blank"><span class="glyphicon glyphicon-comment"></span><b style="color:blue;"> Survey</b></a></li> 
        </ul> 
       </div> 
      </div> 
     </nav> 

После изменения класса NavBar к «Navbar Navbar по умолчанию Navbar фиксированной нижней» футер крепится к bootom страницы, но я не в состоянии для прокрутки вниз до последнего элемента списка. Пожалуйста, помогите ..

+0

Пример, который вы опубликовали, кажется, работает нормально, если y ou're применяя любой другой CSS/JS, вы должны его опубликовать. – vanburen

+0

Вы должны установить 'min-height' списка элементов, решит вашу проблему. – Amit

ответ

0

Попробуйте это ...

.navbar{ 
    position:absolute; 
    bottom:0; 
    width:100%; 
} 
0

нормально, так что если вы хотите сноска наклеить на свитке

затем

.navbar 
{ 
position: fixed; 
bottom: 0; 
width: 100%; 
} 

и если вы просто хотите колонтитула

.navbar 
    { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    } 
Смежные вопросы