固定頁腳，與溢出的身體？

Question

使用引導程序的響應設計的web應用程序，我期待複製典型的移動應用佈局：

Fixed Navbar + Overflowing Body + Fixed Footer

退房智能手機預覽（右側圖標）的： http://www.bootply.com/124373

我有以下的CSS，這是接近的，但固定的頁腳切客身上 - 而不是身體滾動：

html { 
    position: relative; 
    min-height: 100%; 
} 

body { 
    /* Margin bottom by footer height */ 
    margin-bottom: -60px; 
} 

#footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    /* Set the fixed height of the footer here */ 
    height: 60px; 
    background-color: #f5f5f5; 
} 

body > .container { 
    padding: 60px 15px 0; 
} 

.boxes { 
    margin-bottom: 22px; 
} 

.middle { 
    margin-top: 4%; 
    overflow: auto; 
} 

而這裏的HTML：

<!-- Fixed navbar --> 
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Mobile App Format Replication</a> 
    </div> 
    </div> 
</div> 

<!-- Begin page content --> 
<div class="container middle"> 
    <div class="row boxes"> 
    <div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div> 
    <div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div> 
    </div> 
    ... 
    <div class="row boxes"> 
    <div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div> 
    <div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div> 
    </div> 
</div> 

<!-- Fixed Footer --> 
<div id="footer"> 
    <div class="container"> 
    <p class="text-muted">Fixed Footer Content</p> 
    </div> 
</div> 

Answer 1

怎麼樣的腳部構件使用position: fixed，並去除負利潤率在身上（而不是使用60像素底部填充代替）：

#footer { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    height: 60px; 
    background-color: #f5f5f5; 
} 

body > .container { 
    padding: 60px 15px; 
} 

見叉在這裏：Bootply

Answer 2

如果你想複製的移動應用程序佈局，你應該嘗試救護車： http://goratchet.com/

這裏是一些例子：http://goratchet.com/examples/

您可以使用「標籤欄」對有一個固定的頁腳。希望這可以幫助

Answer 3

只需在您的樣式中添加.bar-nav~.content{padding-top: 44px;padding-bottom: 44px;}即可。

完全完成！