모바일에서 볼 때 끈적한 바닥 글이 고정되지 않음

Question

부트 스트랩 간단한 사이드 바가있는 페이지에 끈끈한 바닥 글을 구현하려고합니다.

사이드 바가 축소되었는지 여부에 관계없이 바탕 화면보기에서 바닥 글은 페이지 아래쪽에 붙어있는 것처럼 보입니다. 그러나 휴대 기기에서 볼 때 바닥 글은 페이지 하단에 붙지 않습니다. 당신은 jsfiddle 예에서 일어나는 것을 볼 수 있습니다. 결과 페이지의 크기를 축소하고 세로 막대를 전환하면 바닥 글이 페이지 중간에 나타납니다.

누군가 이런 일이 발생하는 이유를 지적 할 수 있습니까?

HTML :

<div id="wrapper"> 

    <!-- Sidebar --> 
    <div id="sidebar-wrapper"> 
     <ul class="sidebar-nav"> 
      <li class="sidebar-brand"> 
       <a href="#"> 
        Start Bootstrap 
       </a> 
      </li> 
      <li> 
       <a href="#">Dashboard</a> 
      </li> 
      <li> 
       <a href="#">Shortcuts</a> 
      </li> 
      <li> 
       <a href="#">Overview</a> 
      </li> 
      <li> 
       <a href="#">Events</a> 
      </li> 
      <li> 
       <a href="#">About</a> 
      </li> 
      <li> 
       <a href="#">Services</a> 
      </li> 
      <li> 
       <a href="#">Contact</a> 
      </li> 
      <li> 
       <a href="#">Dashboard</a> 
      </li> 
      <li> 
       <a href="#">Shortcuts</a> 
      </li> 
      <li> 
       <a href="#">Overview</a> 
      </li> 
      <li> 
       <a href="#">Events</a> 
      </li> 
      <li> 
       <a href="#">About</a> 
      </li> 
      <li> 
       <a href="#">Services</a> 
      </li> 
      <li> 
       <a href="#">Contact</a> 
      </li> 
     </ul> 
    </div> 
    <!-- /#sidebar-wrapper --> 

    <!-- Page Content --> 
    <div id="page-content-wrapper"> 


     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-lg-12"> 

        <h1>Simple Sidebar</h1> 
        <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p> 
        <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p> 
        <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p> 
        <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p> 
        <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p> 
        <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p> 
        <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p> 

        <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p> 
        <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- /#page-content-wrapper --> 
<div id="push"></div> 
</div> 

<!-- /#wrapper --> 
<div id="footer"> 

    <div class="container"> 
    <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p> 
    </div> 
</div> 
<!-- Menu Toggle Script --> 
<script> 
$("#menu-toggle").click(function(e) { 
    e.preventDefault(); 
    $("#wrapper").toggleClass("toggled"); 
}); 
</script> 

CSS :

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 
.top-nav { 
    height: 50px; 
    position: fixed; 
    width: inherit; 
    z-index: 1029; 
    background-color:yellow; 
} 

#search-page.col-xs-2 { 
    width: 20%; 
} 


#page-content-wrapper { 
    width: 100%; 
} 

/*! 
* Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com) 
* Code licensed under the Apache License v2.0. 
* For details, see http://www.apache.org/licenses/LICENSE-2.0. 
*/ 

/* Toggle Styles */ 

#wrapper { 
    padding-left: 0; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
    width:70%; 
} 

#wrapper.toggled { 
    padding-left: 250px; 
} 

#sidebar-wrapper { 
    z-index: 1000; 
    position: fixed; 
    left: 250px; 
    width: 0; 
    height: 100%; 
    margin-left: -250px; 
    overflow-y: auto; 
    background: #000; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

#wrapper.toggled #sidebar-wrapper { 
    width: 250px; 
} 

#page-content-wrapper { 
    width: 100%; 
    padding: 15px; 
} 

#wrapper.toggled #page-content-wrapper { 
    position: absolute; 
    margin-right: -250px; 
} 

/* Sidebar Styles */ 

.sidebar-nav { 
    position: absolute; 
    top: 0; 
    width: 250px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

.sidebar-nav li { 
    text-indent: 20px; 
    line-height: 40px; 
} 

.sidebar-nav li a { 
    display: block; 
    text-decoration: none; 
    color: #999999; 
} 

.sidebar-nav li a:hover { 
    text-decoration: none; 
    color: #fff; 
    background: rgba(255,255,255,0.2); 
} 

.sidebar-nav li a:active, 
.sidebar-nav li a:focus { 
    text-decoration: none; 
} 

.sidebar-nav > .sidebar-brand { 
    height: 65px; 
    font-size: 18px; 
    line-height: 60px; 
} 

.sidebar-nav > .sidebar-brand a { 
    color: #999999; 
} 

.sidebar-nav > .sidebar-brand a:hover { 
    color: #fff; 
    background: none; 
} 

@media(min-width:768px) { 
    #wrapper { 
     padding-left: 250px; 
    } 

    #wrapper.toggled { 
     padding-left: 0; 
    } 

    #sidebar-wrapper { 
     width: 250px; 
    } 

    #wrapper.toggled #sidebar-wrapper { 
     width: 0; 
    } 

    #page-content-wrapper { 
     padding: 20px; 
    } 

    #wrapper.toggled #page-content-wrapper { 
     position: relative; 
     margin-right: 0; 
    } 
} 


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

     /* Lastly, apply responsive CSS fixes as necessary */ 
     @media (max-width: 767px) { 
     #footer { 
      margin-left: -20px; 
      margin-right: -20px; 
      padding-left: 20px; 
      padding-right: 20px; 
     } 
     } 

.footer { 
background-color: #EDEDED; 
height: 30em; 
z-index: 1050; 
} 

의 jQuery 버전 : 1.10.1

http://jsfiddle.net/tgbej11a/

감사합니다,샘

Answer 1

나는 최신 바이올린의 문제를 해결하기 위해 CSS를 업데이트 한 너무

.top-nav { 
    height: 50px; 
    position: fixed; 
    width: inherit; 
    z-index: 1029; 
    background-color: yellow; 
} 

#search-page.col-xs-2 { 
    width: 20%; 
} 

#page-content-wrapper { 
    width: 100%; 
} 

/*! 
* Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com) 
* Code licensed under the Apache License v2.0. 
* For details, see http://www.apache.org/licenses/LICENSE-2.0. 
*/ 
/* Toggle Styles */ 
#wrapper, #footer { 
    padding-left: 0; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

#wrapper.toggled, #wrapper.toggled + #footer { 
    padding-left: 250px; 
} 

#sidebar-wrapper { 
    z-index: 1000; 
    position: fixed; 
    left: 250px; 
    width: 0; 
    height: 100%; 
    margin-left: -250px; 
    overflow-y: auto; 
    background: #000; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

#wrapper.toggled #sidebar-wrapper { 
    width: 250px; 
} 

#page-content-wrapper { 
    padding: 15px; 
} 
    /* Sidebar Styles */ 
.sidebar-nav { 
    position: absolute; 
    top: 0; 
    width: 250px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

.sidebar-nav li { 
    text-indent: 20px; 
    line-height: 40px; 
} 

.sidebar-nav li a { 
    display: block; 
    text-decoration: none; 
    color: #999999; 
} 

.sidebar-nav li a:hover { 
    text-decoration: none; 
    color: #fff; 
    background: rgba(255,255,255,0.2); 
} 

.sidebar-nav li a:active, 
    .sidebar-nav li a:focus { 
    text-decoration: none; 
} 

.sidebar-nav > .sidebar-brand { 
    height: 65px; 
    font-size: 18px; 
    line-height: 60px; 
} 

.sidebar-nav > .sidebar-brand a { 
    color: #999999; 
} 

.sidebar-nav > .sidebar-brand a:hover { 
    color: #fff; 
    background: none; 
} 

@media(min-width:768px) { 
    #wrapper, #wrapper + #footer { 
     padding-left: 250px; 
    } 

    #wrapper.toggled, #wrapper.toggled + #footer { 
     padding-left: 0; 
    } 

    #sidebar-wrapper { 
     width: 250px; 
    } 

    #wrapper.toggled #sidebar-wrapper { 
     width: 0; 
    } 

    #page-content-wrapper { 
     padding: 20px; 
    } 

    #wrapper.toggled #page-content-wrapper { 
     position: relative; 
     margin-right: 0; 
    } 
} 
    /* Set the fixed height of the footer here */ 
#push { 
    height: 60px; 
} 

#footer { 
    background-color: #f5f5f5; 
} 

#footer .container { 
    margin-left: 0; 
} 
    /* Lastly, apply responsive CSS fixes as necessary */ 
@media (max-width: 767px) { 
    #footer { 
     margin-right: -20px; 
     padding-right: 20px; 
    } 
} 

.footer { 
    background-color: #EDEDED; 
    z-index: 1050; 
}