头部固定下面滑动&&获取手机屏高
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)的方法
这两天接了一个需求,页面是这样的 然后需求是页面中的这个表格当页面向上滚动,且表格的表头到达窗口上方时,表头悬浮在页面的上方,表格正常滚动,这样表格内的数据可以随时看到表头内容. 一开始我认为这是极简 ...
随机推荐
- centos7 安装mysql5.7及配置
一.Mysql 各个版本区别:1.MySQL Community Server 社区版本,开源免费,但不提供官方技术支持.2.MySQL Enterprise Edition 企业版本,需付费,可以试 ...
- C#winform使用+=和-=订阅事件和移除事件订阅
1.C#winform中使用+=和-=订阅事件和移除事件订阅 2.可以使用+=给一个控件订阅多个事件,触发事件时按顺序执行,直到使用-=移除事件订阅为止.
- 微博app中常用正则表达式
/* weibo.app 里面的正则,有兴趣的可以参考下: HTTP链接 (例如 http://www.weibo.com ): ([hH]ttp[s]{0,1})://[a-zA-Z0-9\.\-] ...
- 【转】配置 VS 2015 开发跨平台手机应用
为了使用 VS 2015 开发跨平台手机应用,VS 2015 装了很多次,遇到了很多坑,才终于弄明白怎样配置才能正常使用C#开发手机应用,现把步骤分享给大家,以免大家少走弯路. 运行环境: Windo ...
- Demonstrating One-Shot Execution TimerTask Timer
Listing -. Demonstrating One-Shot Execution import java.util.Timer; import java.util.TimerTask; publ ...
- 修改MyEclipse默认的Servlet和jsp代码模板
一.修改Servlet的默认模板代码 使用MyEclipse创建Servlet时,根据默认的Servlet模板生成的Servlet代码如下: 1 package gacl.servlet.study; ...
- 初学MyBatis.net
1.MyBatis.net介绍 MyBatis..net是一个简单,但是完整的ORM框架,它使你的实体对象与sql语句或者存储过程之间的映射变得很简单,并提供数据访问.包括两个主要框架 DataAcc ...
- Freemarker的初次使用之FTL标签嵌套与map的使用
入职第二周了,在熟悉了公司自动化测试脚本的编写(使用什么数据库,使用哪种语言,框架带了哪些方法)后,现在开始熟悉模拟器,我们把请求发到服务器1,服务器1根据请求参数处理后将结果发给模拟器,模拟器根据服 ...
- c signal
信号是Linux编程中非常重要的部分,本文将详细介绍信号机制的基本概念.Linux对信号机制的大致实现方法.如何使用信号,以及有关信号的几个系统调用. 信号机制是进程之间相互传递消息的一种方法,信号全 ...
- 详解 Qt 线程间共享数据(用信号槽方式)
使用共享内存.即使用一个两个线程都能够共享的变量(如全局变量),这样两个线程都能够访问和修改该变量,从而达到共享数据的目的. Qt 线程间共享数据是本文介绍的内容,多的不说,先来啃内容.Qt线程间共享 ...