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

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{
    width: 100%;
    height: 100%;
    color: #333;
    -webkit-appearance: none;
}

.search-input-box{
    position: absolute;
    width: 94%;
    padding: 6px 3%;
    background-color: #2d4486;
    z-index: 10;
}

.search-group {
    position: relative;
    background: #f5f5f5;
    font-size: 14px;
    margin: 0;
    margin-top: 40px;
    width: 100%;
    /* 使之可以滚动 */
    overflow-y: scroll;
    /* 增加该属性，可以增加弹性，是滑动更加顺畅 */
    -webkit-overflow-scrolling: touch;
}
</style>

巴特西

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

最新文章

热门文章