likes
comments
collection
share

移动端-当页面高度不足一屏幕按钮自动居底，当页面高度超过一屏幕的时候跟着内容滚动

作者站长头像
站长
· 阅读数 56

前言

之前移动端遇到过这样一个问题，有个列表，但是列表可能很多，也可能就一个，然后页面底部有个按钮，按钮是根据列表长度来确定位置的。比如列表高度加上按钮高度小于整个页面高度的时候，按钮固定在底部；列表高度加上按钮高度大于整个页面高度的时候，按钮就放在列表后面；如图：

小于页面高度：

移动端-当页面高度不足一屏幕按钮自动居底，当页面高度超过一屏幕的时候跟着内容滚动

大于页面高度：

移动端-当页面高度不足一屏幕按钮自动居底，当页面高度超过一屏幕的时候跟着内容滚动

之前思路：

之前是想着用js来实现的

第一步:获取整个页面的高度；

第二部:获取列表的总高度及按钮的高度（算padding和margin值）；

第三部:将列表总高度 + 按钮高度 然后和页面高度比较，再给予按钮不同的样式（定位还是不定位）

这种方法无疑很垃圾，然后今天遇到了相同的需求，突然想起来可以使用display:flex来实现，当时就笑了，原来以前刚入行的时候是个真真实实的小菜鸟！

display实现

直接上代码吧......

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body{
    margin: 0;
  }
  .wrap {
    display: flex;
    flex-flow: column nowrap;
    min-height: 100vh!important;
  }
  ul{
    flex: 1;
    padding: 0;
    margin-top: 0px;

  }
  li{
    height: 100px;
    width: 100%;
    background: yellowgreen;
  }
  li:nth-child(2n){
    background-color: bisque;
  }

  button{
    width: 90%;
    height: 60px;
    background: #1677ff;
    border: none;
    border-radius: 10px;
    margin: 0 auto 20px;
    color: #fff;
  }
</style>
<body>
  <div class="wrap">
    <ul>
      <li>哈哈哈哈</li>
      <li>哈哈哈哈</li>
      <li>哈哈哈哈</li>
    </ul>
    <button>按钮</button>
  </div>
</body>
</html>

来看看效果吧

转载自:https://juejin.cn/post/7166503763287638024
评论
请登录