Question

使用Bootstrap为响应式设计的网络应用程序，我希望复制典型的移动应用程序布局：

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，并删除正文上的负边距（而是使用60px底部填充）：

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

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

见叉子： Bootply

Answer 2

如果您尝试复制移动应用布局，则应尝试使用Ratchet： http://goratchet.com/

以下是一些例子：http://goratchet.com/examples/

您可以使用＆＃34;标签栏＆＃34;在那里有一个固定的页脚。希望这有帮助

Answer 3

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

完全完成了！

固定页脚，溢出的身体？

3 个答案: