需求：
- 顶部固定高度
- 底部固定高度
- 中间高度自适应，并且可以出发内部滚动而不出现横向滚动和垂直动条
解决方式一：中间高度利用calc计算高度，利用负的margin和padding实现隐藏滚动条；
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="appCtrl">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
overflow: hidden;
background: #fff;
}
.header{
width: 100%;
height: 5rem;
background-color: green;
margin-bottom: 1rem;
}
.header span{
display: inline-block;
width: 20%;
height: 100%;
line-height:5rem;
text-align: center;
float: left;
font-size:0.5rem;
}
.header span:last-child{
float: right;
}
.content{
height: calc(100% - 11rem);
width: 100%;
box-sizing: border-box;
}
.content ul{
overflow-y: scroll;
overflow-x: hidden;
/*ios端overflow会出现卡顿现象，设置该属性后ios会为其创建一个`UIScrollView`，利用硬件来加速渲染。*/
-webkit-overflow-scrolling: touch;
margin-right: -0.2rem;
padding-right: 0.2rem;
width: 100%;
height: 100%;
background: #fff;
list-style: none;
}
.content ul li{
width: 100% ;
height: 3rem;
line-height:3rem;
border-bottom: 1rem solid #000000;
padding-left: 2rem;
text-align: left;
}
.footer{
width: 100%;
height: 5rem;
background-color: yellow;
position: fixed;
left: 0;
bottom: 0;
}
.footer ul{
width: 100%;
height: 100%;
display: flex;
list-style: none;
}
.footer ul li{
flex: 1;
float: left;
text-align: center;
height: 5rem;
line-height:5rem;
}
</style>
</head>
<body>
<div class="header">
<span>取消</span>
<span>下一步</span>
</div>
<div class="content">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<div class="footer">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript">
document.getElementsByTagName('html')[0].style.fontSize = window.screen.width / 10 + 'px';
</script>
</body>
</html>
- 但是calc属性的支持性并不是很好：
calc浏览器支持.png
可惜的是对于低版本的安卓浏览器、ios浏览器包括微信浏览器在内的主流浏览器支持都不好，依然只能弃用。
- 还有一个问题就是：在使用overflow属性时可以增设
-webkit-overflow-scrolling: touch;
ios端overflow会出现卡顿现象，设置该属性后ios会为其创建一个
UIScrollView，利用硬件来加速渲染。
- webkit浏览器内核下解决滚动条方法二
设置webkit浏览器的私有属性::-webkit-scrollbar能更灵活的控制滚动条，在此感谢。如果只需要隐藏，如下代码即可：
::-webkit-scrollbar{ display: none }*
虽然移动端的浏览器webkit内核居多，不过还是要在真机测试后再得出结论，如果有些浏览器不支持这个属性的话，依然可以使用上面的小hack。
::-webkit-scrollbar{ display: none }.png
- 遇到一个问题：就是给一个当内部元素拖动时有自己的滚动条，但是在外部全局移动依然能触发内部滚动事件；
解决：不滚动部分固定定位，滚动部分绝对定位，设置html的overflow：hidden；移动端设置body的overflow：hidden无效，需要设置到html 上；但是这个问题就是可能一开始加载得时候会有卡顿的现象
网友评论