头部固定下面滑动&&获取手机屏高
- 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>
头部固定下面滑动&&获取手机屏高的更多相关文章
- js获取网页屏高 屏宽
<SCRIPT LANGUAGE="JavaScript"> <!-- //document.body.scrollTop 滚动条的上端距离 //document ...
- android屏幕适配的全攻略3-动态获取手机屏幕宽高及动态设置控件宽高
1.获取手机屏幕宽高: DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetr ...
- 手机页面关于头部固定定位与input出现的问题
前些天写了一个页面,要求头部导航进行固定定位position:fixed.内容区域有输入框input.在大多数手机上都是显示正常的,可偏在一些低版本的手机却出现问题了. 把我给苦恼的不行. 问题:头部 ...
- Android StickHeaderRecyclerView - 让recyclerview头部固定
介绍在项目中有时会需要recyclerview滑动式时某个view滑出后会固定在头部显示,比较常用的比如手机联系人界面.地区选择界面等. StickHeaderRecyclerView就是实现这个功能 ...
- android获取手机信息大全
IMEI号,IESI号,手机型号: private void getInfo() { TelephonyManager mTm = (TelephonyManager) getSystemServic ...
- android获取手机信息2
IMEI号,IESI号,手机型号: private void getInfo() { TelephonyManager mTm = (TelephonyManager) getSystemServic ...
- [转] android获取手机信息大全
原文链接:http://blog.csdn.net/hytfly/article/details/8552483 IMEI号,IESI号,手机型号: private void getInfo() { ...
- 类似今日头条,头部tab可滑动,下面的内容可跟着滚动,掺杂着vue和require等用法例子
1.在main.js里 /*主模块的入口 结合require一起使用*/ require.config({//require的基础用法 配置一下 paths: { "Zepto" ...
- 网页制作中在头部固定悬浮table表头(thead)的方法
这两天接了一个需求,页面是这样的 然后需求是页面中的这个表格当页面向上滚动,且表格的表头到达窗口上方时,表头悬浮在页面的上方,表格正常滚动,这样表格内的数据可以随时看到表头内容. 一开始我认为这是极简 ...
随机推荐
- python twisted启动定时服务
以下是python脚本send_mms.py #############################################!/usr/bin/python# -*- coding: ut ...
- 西秦的ACE-Python教程 一、Python本地开发环境部署
西秦的ACE-Python教程 一.Python本地开发环境部署 西秦 级别: 论坛版主 发帖 1357 云币 2782 加关注 写私信 只看楼主 更多操作楼主 发表于: 10-10 ...
- php7安装
# 配置参数 ./configure --prefix=/usr/local/php7 \ --with-config-file-path=/usr/local/php7/etc \ --with-m ...
- reduce()
Professional.JavaScript.for.Web.Developers.3rd.Edition.Jan.2012 var value = [1,2,3,4,5]; var sum = v ...
- DefaultHttpClient使用
转自:http://username2.iteye.com/blog/1664995 博客分类: java 工具类 javaio ]; } json = JSONObject.fromObject ...
- Git版本控制
官方文档:http://git-scm.com/book/en/v2 github :https://guides.github.com/activities/hello-world/ How to ...
- 数据库里any 和 all 的区别
any 是任意一个all 是所有 比如select * from student where 班级='01' and age > all (select age from student whe ...
- nrf51822-使用16位自定义UUID
以 ble_app_uart为例 工程中创建的nus服务以及其中的两个特性值都是128位的UUID.nordic sdk中使用128位UUID的方式和标准128UUID类似,它是提供一个基准UUID, ...
- Java HashMap、LinkedHashMap
如果需要使用的Map中的key无序,选择HashMap:如果要求key有序,则选择TreeMap. 但是选择TreeMap就会有性能问题,因为TreeMap的get操作的时间复杂度是O(log(n)) ...
- 采用CSS3设计的登陆界面
body部分内容: <body> <form id="form_id" name="form_id" method="get&quo ...