바닥 글이 제대로 표시되지 않고 페이지 하단에 내용을 숨 깁니다.

Question

이 바닥 글에 대한 질문 수가 몇 개인 지 셀 수 없습니다. 제발, 모든 답변을 시도했지만 내 문제를 해결할 수 없으므로이 것을 용서해주십시오.

부트 스트랩의 행과 열로 웹 페이지를 만드십시오. container-fluid의 닫는 div 바로 앞에있는이 코드를 붙여 넣은이 코드는 나중에 두 번째 드롭 다운 메뉴를 추가하도록 수정했습니다.

<!-- Fixed navbar --> 
    <div class="footer navbar-inverse navbar-fixed-bottom"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#" onClick="history.go(-1)">&#171; MyPage</a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Themes <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
       <li><a href="#" data-theme="default_theme" class="theme-link">Just black</a></li> 
       <li><a href="#" data-theme="cerulean" class="theme-link">Cerulean</a></li> 
       <li><a href="#" data-theme="cyborg" class="theme-link">Cyborg</a></li> 
       <li><a href="#" data-theme="journal" class="theme-link">Journal</a></li> 
       <li><a href="#" data-theme="readable" class="theme-link">Readable</a></li> 
       <li><a href="#" data-theme="simplex" class="theme-link">Simplex</a></li> 
        <li><a href="#" data-theme="spacelab" class="theme-link">Spacelab</a></li> 
        <li><a href="#" data-theme="united" class="theme-link">United</a></li> 
       </ul> 
      </li> 
      </ul> 
      <ul class="nav navbar-nav"> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Xml Themes <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
       <li><a href="#" xml-data-theme="default_xml" class="theme-xml-link">Simple white</a></li> 
       <li><a href="#" xml-data-theme="dark" class="theme-xml-link">Dark</a></li> 
       <li><a href="#" xml-data-theme="okaida" class="theme-xml-link">Okaida</a></li> 
       <li><a href="#" xml-data-theme="coy" class="theme-xml-link">Coy</a></li> 
       <li><a href="#" xml-data-theme="funky" class="theme-xml-link">Funky</a></li> 
       <li><a href="#" xml-data-theme="solarized-light" class="theme-xml-link">Solarized Light</a></li> 
       <li><a href="#" xml-data-theme="twilight" class="theme-xml-link">Twilight</a></li> 
       </ul> 
      </li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </div> 

    </div><!-- closing the container --> 

</body> 
</html> 

코드가 그대로 작동하여 코드 하단에이 navbar가 있습니다. <div class="navbar navbar-inverse navbar-fixed-bottom">을 <footer class="navbar navbar-inverse navbar-fixed-bottom"> 또는 <div class="footer navbar-inverse navbar-fixed-bottom"> 으로 바꾸어 보았습니다. 또한 CSS에 고정 된 높이를 지정했습니다. 아무 것도 바뀌지 않는 것 같습니다.

내 페이지의 마지막 부분이이 탐색 바에 의해 숨겨집니다. 나는 그것을 끈적 거리게 할 수 없다.

이 호에 대한 답변은 무엇입니까? 나는 .. 나는 이미이 주제와 관련된 모든 질문을 읽을 생각하지만,

편집 : 그건 설정하여 추가 jsfiddle https://jsfiddle.net/u2hw5pt2/1/

Answer 1

끈적 끈적한 바닥 글 작품 position 문서에서 그것을 소요 fixed에 즉, 브라우저에서 콘텐츠를 "뒤"오지는 않을 것이고, 결국에는 끝날 것입니다.

https://jsfiddle.net/u2hw5pt2/2/

body { 
    padding-bottom: 100px; 
}