固定页脚,溢出的身体?

时间:2014-03-24 18:57:13

标签: html css twitter-bootstrap responsive-design

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

3 个答案:

答案 0 :(得分:2)

如何在页脚元素上使用position: fixed,并删除正文上的负边距(而是使用60px底部填充):

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

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

见叉子: Bootply

答案 1 :(得分:0)

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

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

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

答案 2 :(得分:0)

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

完全完成了!