头部固定下面滑动&&获取手机屏高

height(){
//获取屏高

let phone_height = document.documentElement.clientHeight;
    let group = this.refs.search;
//console.log(group,phone_height);
//40px 是顶部固定区域的高度 
    group.style.height = (phone_height - 40) + 'px' ;
}

<div className="search-page-container">
<div className="search-input-box">
<input
type="text"
className="search-input"
placeholder="请输入问题关键词"
ref="search"
onKeyUp={this.search}
/>
</div>
</div>
 
<section className="search-group" ref="search">
//滚动区域高度
</section>

<style>
.search-page-container{
100%;
height: 100%;
color: #333;
-webkit-appearance: none;
}

.search-input-box{
position: absolute;
94%;
padding: 6px 3%;
background-color: #2d4486;
z-index: 10;
}
.search-group {
position: relative;
background: #f5f5f5;
font-size: 14px;
margin: 0;
margin-top: 40px;
100%;
/* 使之可以滚动 */
overflow-y: scroll;
/* 增加该属性,可以增加弹性,是滑动更加顺畅 */
-webkit-overflow-scrolling: touch;
}
</style>
 
原文地址:https://www.cnblogs.com/y-lin/p/5778834.html