1. height(){
  1. //获取屏高
  2.  
  3. let phone_height = document.documentElement.clientHeight;
  1. let group = this.refs.search;
    //console.log(group,phone_height);
  1. //40px 是顶部固定区域的高度
  1. group.style.height = (phone_height - 40) + 'px' ;
    }
  1. <div className="search-page-container">
    <div className="search-input-box">
    <input
    type="text"
    className="search-input"
    placeholder="请输入问题关键词"
    ref="search"
    onKeyUp={this.search}
    />
    </div>
    </div>
  1.  
  1. <section className="search-group" ref="search">
  1. //滚动区域高度
  1. </section>
  1. <style>
    .search-page-container{
    width: 100%;
    height: 100%;
    color: #333;
    -webkit-appearance: none;
    }
  2.  
  3. .search-input-box{
    position: absolute;
    width: 94%;
    padding: 6px 3%;
    background-color: #2d4486;
    z-index: 10;
    }
  1. .search-group {
    position: relative;
    background: #f5f5f5;
    font-size: 14px;
    margin: 0;
    margin-top: 40px;
    width: 100%;
    /* 使之可以滚动 */
    overflow-y: scroll;
    /* 增加该属性,可以增加弹性,是滑动更加顺畅 */
    -webkit-overflow-scrolling: touch;
    }
    </style>
  1.  

头部固定下面滑动&&获取手机屏高的更多相关文章

  1. js获取网页屏高 屏宽

    <SCRIPT LANGUAGE="JavaScript"> <!-- //document.body.scrollTop 滚动条的上端距离 //document ...

  2. android屏幕适配的全攻略3-动态获取手机屏幕宽高及动态设置控件宽高

    1.获取手机屏幕宽高: DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetr ...

  3. 手机页面关于头部固定定位与input出现的问题

    前些天写了一个页面,要求头部导航进行固定定位position:fixed.内容区域有输入框input.在大多数手机上都是显示正常的,可偏在一些低版本的手机却出现问题了. 把我给苦恼的不行. 问题:头部 ...

  4. Android StickHeaderRecyclerView - 让recyclerview头部固定

    介绍在项目中有时会需要recyclerview滑动式时某个view滑出后会固定在头部显示,比较常用的比如手机联系人界面.地区选择界面等. StickHeaderRecyclerView就是实现这个功能 ...

  5. android获取手机信息大全

    IMEI号,IESI号,手机型号: private void getInfo() { TelephonyManager mTm = (TelephonyManager) getSystemServic ...

  6. android获取手机信息2

    IMEI号,IESI号,手机型号: private void getInfo() { TelephonyManager mTm = (TelephonyManager) getSystemServic ...

  7. [转] android获取手机信息大全

    原文链接:http://blog.csdn.net/hytfly/article/details/8552483 IMEI号,IESI号,手机型号: private void getInfo() { ...

  8. 类似今日头条,头部tab可滑动,下面的内容可跟着滚动,掺杂着vue和require等用法例子

    1.在main.js里 /*主模块的入口 结合require一起使用*/ require.config({//require的基础用法 配置一下 paths: { "Zepto" ...

  9. 网页制作中在头部固定悬浮table表头(thead)的方法

    这两天接了一个需求,页面是这样的 然后需求是页面中的这个表格当页面向上滚动,且表格的表头到达窗口上方时,表头悬浮在页面的上方,表格正常滚动,这样表格内的数据可以随时看到表头内容. 一开始我认为这是极简 ...

随机推荐

  1. python twisted启动定时服务

    以下是python脚本send_mms.py #############################################!/usr/bin/python# -*- coding: ut ...

  2. 西秦的ACE-Python教程 一、Python本地开发环境部署

    西秦的ACE-Python教程 一.Python本地开发环境部署       西秦 级别: 论坛版主 发帖 1357 云币 2782 加关注 写私信   只看楼主 更多操作楼主  发表于: 10-10 ...

  3. php7安装

    # 配置参数 ./configure --prefix=/usr/local/php7 \ --with-config-file-path=/usr/local/php7/etc \ --with-m ...

  4. reduce()

    Professional.JavaScript.for.Web.Developers.3rd.Edition.Jan.2012 var value = [1,2,3,4,5]; var sum = v ...

  5. DefaultHttpClient使用

    转自:http://username2.iteye.com/blog/1664995 博客分类:  java 工具类 javaio  ]; } json = JSONObject.fromObject ...

  6. Git版本控制

    官方文档:http://git-scm.com/book/en/v2 github :https://guides.github.com/activities/hello-world/ How to ...

  7. 数据库里any 和 all 的区别

    any 是任意一个all 是所有 比如select * from student where 班级='01' and age > all (select age from student whe ...

  8. nrf51822-使用16位自定义UUID

    以 ble_app_uart为例 工程中创建的nus服务以及其中的两个特性值都是128位的UUID.nordic sdk中使用128位UUID的方式和标准128UUID类似,它是提供一个基准UUID, ...

  9. Java HashMap、LinkedHashMap

    如果需要使用的Map中的key无序,选择HashMap:如果要求key有序,则选择TreeMap. 但是选择TreeMap就会有性能问题,因为TreeMap的get操作的时间复杂度是O(log(n)) ...

  10. 采用CSS3设计的登陆界面

    body部分内容: <body> <form id="form_id" name="form_id" method="get&quo ...