实现移动端的 css stickyfooter

原创于 2018-11-30 17:05:02 发布 · 428 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

移动端

本文介绍三种常见移动端网页设计中footer布局方法：使用calc属性、flex布局及处理兼容性方案，帮助开发者根据不同场景选择最适合的footer固定底部策略。

描述：在移动端经常有这样的效果，当页面内容高度不足视口高度时footer固定在底部，而页面内容高度高于视口高度时，footer随内容向下移动。

方法一: 使用 calc 实现（不推荐）

// html
<body>
  <div class="container">
    <div class="header">header</div>
    <div class="main">main</div>
    <div class="footer">footer</div>
  </div>
</body>

// css
.main {
  min-height: calc(100vh - header高度 - footer高度)
  box-sizing: border-box; // 如果main有设置padding和border则须设置
}

方法二：使用 flex 布局（推荐）

// css
.container {
  min-height: 100vh; /*高度最小为视口的高度*/
  display: flex;
  flex-direction: column;
}
.main {
  flex: 1;
}

方法三：处理兼容性

缺点：必须指定 footer 的高度

// css
 body, html {
   height: 100%;
 }
 .container {
   height: 100%;
 }
 .main {
   min-height: 100%;
   margin-bottom: -50px;
 }
 .footer {
   height: 50px;
 }

标签

#css stickyfooter