与人交流一次，往往比多年苦思冥想更能启发心智。--列夫·托尔斯泰
公司就我一个前端，很多东西自己想自己写，自己看书，自己摸索，只要达到项目要求就好，今天跟别人和交流才发现，别人实现一个效果的方法仅几行代码，我自己是人家的数倍，备受打击，在此记录。
此次目标是实现一页 H5 页面内嵌在合作方的 APP 里，原型如下：
UI
看到原型图，列表是动态的，底部的版权的位置在列表较少的时候保持在页面底部，列表内容多时放在列表的后面，这样版权位置始终保持页面在页面的底部。
按照我之前的经验，我应该用JS获取文档的高度，判断文档高度是否大于可视区域高度，最后决定是否对版权做定位处理，代码如下：
// html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<ul class="list">
<li>相对于视口的高度，视口被均分为100单位的vh</li>
<li>相对于视口的高度，视口被均分为100单位的vh</li>
<li>相对于视口的高度，视口被均分为100单位的vh</li>
<li>相对于视口的高度，视口被均分为100单位的vh</li>
<li>相对于视口的高度，视口被均分为100单位的vh</li>
<li>相对于视口的高度，视口被均分为100单位的vh</li>
<li>相对于视口的高度，视口被均分为100单位的vh</li>
<li>相对于视口的高度，视口被均分为100单位的vh</li>
<li>相对于视口的高度，视口被均分为100单位的vh</li>
</ul>
<div class="copyright">
copyright by Annun
</div>
</div>
</body>
</html>
// scss
body {
margin: 0;
}
.container {
width: 100vw;
height: auto;
.list {
width: 100vw;
margin: 0;
padding: 0;
li {
list-style: none;
box-sizing: border-box;
padding: 10px 15px;
}
}
.copyright {
width: 100vw;
height: 44px;
background-color: rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 44px;
}
}
// javascript
"use strict"
// 先将版权部分放在文档流里，根据设备高度是否定位在页面底部
function rz() {
// 浏览器内页面可用高度
let dirveHeight = window.innerHeight;
// 文档高度
let body = (document.compatMode && document.compatMode == 'CSS1Compat') ? document.documentElement : document.body;
let docHeight = body.offsetHeight;
// copy
let copyright = document.getElementsByClassName("copyright")[0];
if (dirveHeight > (docHeight + 44)) {
// 需要定位
copyright.setAttribute("style", "position: fixed; left: 0; bottom: 0;");
} else {
// 移除CSS样式
copyright.setAttribute("style", "");
}
}
window.onload = rz;
window.onresize = rz;
这就是我的实现方式，也符合 UI 的要求；
今天看到他们在讨论这个，我很高兴的把我的方式说出去！他们就说为什么要搞那么复杂，并给我写了一个例子，为了和我的对比，HTML 部分不变，只加了几行CSS就实现了，原理是利用 Flex 布局实现，代码如下：
// scss
.container {
display: flex;
min-height: 100vh;
/* 将文档竖排 */
flex-direction: column;
overflow: hidden;
/* 切分区域 */
.list {
/* 占据剩下的所有 */
flex: 1;
margin: 0;
padding: 0;
li {
list-style: none;
box-sizing: border-box;
padding: 10px 15px;
}
}
/* 版权区域 */
.copyright {
background-color: rgba(0, 0, 0, 0.2);
height: 60px;
line-height: 60px;
}
}
2020-06-16 更正
在安卓上，安卓键盘弹起，会改变 webview 高度，如果页面有定位，弹窗等破坏文档流的元素，请使用JS方案，这样在安卓上兼容性会好一些，flex 我还没研究透，有新的处理方式会及时更新。
网友评论