前言
之前移动端遇到过这样一个问题，有个列表，但是列表可能很多，也可能就一个，然后页面底部有个按钮，按钮是根据列表长度来确定位置的。比如列表高度加上按钮高度小于整个页面高度的时候，按钮固定在底部；列表高度加上按钮高度大于整个页面高度的时候，按钮就放在列表后面；如图：
小于页面高度：
大于页面高度：
之前思路：
之前是想着用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>
来看看效果吧
最后
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
扫描二维码关注公众号，回复：
16721494 查看本文章
有需要的小伙伴，可以点击下方卡片领取，无偿分享