2014-11-10 23 views
0

У меня проблема с липким нижним колонтитулом на хром ... все отлично смотрится на FF и IE, хорошо, поэтому .. Когда я изменяю размер экрана, обтекание содержимого должно быть, но нижний колонтитул и перекрывает мой контент, если кто-то может дать мне подсказку или что-то, что я потерял, будет хорошо.Липкий нижний колонтитул с бутстрапом

Im использованием ASP.Net, Boostrap3

CSS.. 

html,form,body { 
height: 100%; 
/* The html and body elements cannot have any padding or margin. */ 
} 

/* Wrapper for page content to push down footer */ 
#wrap { 
min-height: 100%; 
height: auto; 
/* Negative indent footer by its height */ 
margin: 0 auto -60px; 
/* Pad bottom by footer height */ 
padding: 0 0 60px; 
} 

/* Set the fixed height of the footer here */ 
#footer { 
height: 60px; 
background-color: #f5f5f5; 
} 

body { padding-top: 100px;} 

HTML 
<form id="form1" runat="server"> 
    <div id="wrap"> 

     <!-- header --> 
     <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
      <div class="container"> 
       <div style="float:left;"><h1><kbd>Si</kbd>stema</h1></div> 
       <div style="float:right;"> 
       <ol class="breadcrumb"> 
        <li><asp:LinkButton>Pag1</asp:LinkButton></li> 
        <li><asp:LinkButton>R2</asp:LinkButton></li> 
        <li><asp:LinkButton>D3</asp:LinkButton></li> 
        <li><asp:linkButton>A4</asp:linkButton></li> 
        <li class="active">F5</li> 
       </ol> 
      </div> 
      </div> 
     </nav> 
     <div class="container"> 
      <!-- Begin page content --> 

     </div> 
    </div> 

<div id="footer"> 
    <div class="container"> 
    <!-- footer --> 
    </div> 
</div> 

ответ

0

Вы используете Bootstrap. Таким образом, вы можете:

<div id="footer" class="navbar navbar-default navbar-fixed-bottom"> 

Это будет использовать загрузчик JS и CSS, чтобы дать вам липкий колонтитула.

EDIT: Убедитесь, что сноска находится внутри вашего контейнера, а

<div class="container"> 
    <!-- Begin page content --> 

     <div id="footer"> 

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

     </div>  
    </div> 
    </div> 
+0

я маркирую как ответ, потому что я не сказал, что я хотел, чтобы прокрутить рассвет колонтитул, но может у меня с этим помочь? Я нашел пример в boostrap [link] (http://getbootstrap.com/examples/sticky-footer-navbar/), но я не могу видеть код – deathwalk3

+0

Я отредактировал свой ответ, чтобы помочь вам. –

Смежные вопросы