固定页脚，溢出的身体？

Posted 2021-05-02

使用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>

答案

如何在页脚元素上使用position: fixed，并删除正文上的负边距（而是使用60px底部填充代替）：

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

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

见叉子：Bootply

另一答案

如果您正在尝试复制移动应用程序布局，您应该尝试使用Ratchet：http://goratchet.com/

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

您可以使用“标签栏”在其上固定页脚。希望这可以帮助

另一答案

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

它完全完成了！