头部固定下面滑动&&获取手机屏高
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)的方法
这两天接了一个需求,页面是这样的 然后需求是页面中的这个表格当页面向上滚动,且表格的表头到达窗口上方时,表头悬浮在页面的上方,表格正常滚动,这样表格内的数据可以随时看到表头内容. 一开始我认为这是极简 ...
随机推荐
- DirectX 基础学习系列6 字体
DIRECTX9自带ID3DXFONT类 内部调用GDI的接口,效率一般,但能够处理一些复杂的字体 HRESULT D3DXCreateFontIndirect( LPDIRECT3DDEVICE9 ...
- 【转载】loadrunner使用system()函数调用Tesseract-OCR识别验证码遇到的问题
俗话说前人栽树,后人乘凉,此话一点不假,结合云层的一遍文章:http://bbs.51testing.com/thread-533920-1-1.html,知道还有一个Tesseract-OCR可以用 ...
- P1092 虫食算 NOIP2002
为了测试stl 30分的暴力写法... #include <bits/stdc++.h> using namespace std; const int maxn = 11; int n; ...
- svn 入门
SVN版本:1.5 及更新版本 名词说明: WC:Working Copy 你的工作区 Versioned:受控的:受版本控制的 SVN是什么? SVN是开源的版本控制系统. 比CVS更多的特性.一个 ...
- [转载]推荐不伤眼睛的文字背景色 VS背景色
天天使用电脑要主要保护眼睛.下面介绍下不伤眼睛的文字背景色 苹果绿 RGB 204,255,204 #CCFFCC 杏仁黄 rgb 250 249 222 #FAF9DE 青草绿 rgb 227 23 ...
- HTML+CSS结构与表现原则
CSS网页布局即版式布局,是网页设计师将有限的视觉元素进行有机的排列组合.主要通过CSS的浮动.定位功能来实现UI设计的布局要求. 常见的布局有:一列布局,两列布局,三列布局和混合布局. HTML清除 ...
- 如何设置启动页 LaunchImage
- SqlServer2008R2 修改表中列为自增列
选定列,修改列属性标识规范中(是标识)为是,标识增量为1,标识种子为1 SQL语句:alter table 表名 add 列名 int IDENTITY(1,1) NOT NULL
- Selenium2学习-027-WebUI自动化实战实例-025-JavaScript 在 Selenium 自动化中的应用实例之三(页面滚屏,模拟鼠标拖动滚动条)
日常的 Web UI 自动化测试过程中,get 或 navigate 到指定的页面后,若想截图的元素或者指定区域范围不在浏览器的显示区域内,则通过截屏则无法获取相应的信息,反而浪费了无畏的图片服务器资 ...
- 我的工具箱之Opera浏览器
下载地址:http://pan.baidu.com/s/1gdVQA11 刚出来时挺火的,后来有点渐趋式微了.