固定页脚，与溢出的身体？

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;}即可。

完全完成！