<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Auto-height - fullPage.js</title>

    <meta name="author" content="Alvaro Trigo Lopez" />

    <meta name="description" content="fullPage auto-height example." />

    <meta name="keywords"  content="fullpage,jquery,demo,screen,fullscreen,auto-height,full-screen" />

    <meta name="Resource-type" content="Document" />

    <link rel="stylesheet" type="text/css" href="chajian/fullpage.css" />

    <style>

        .myContent{

            height: 300px;

        }

    </style>

</head>

<body>

<div id="fullpage">

    <div class="section section1">

        <div>

            <h1>Section 1</h1>

        </div>

    </div>

    <div class="section fp-auto-height section2" id="section1">

        <div class="myContent">

            <h1>Section 2</h1>

        </div>

    </div>

    <div class="section fp-auto-height fp-tableCell" id="section2">

        <div class="myContent">

            <h1>Section 3</h1>

        </div>

    </div>

</div>

<script type="text/javascript" src="chajian/fullpage.js"></script>

<script type="text/javascript">

    var myFullpage = new fullpage('#fullpage', {

        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE']

    });

</script>

</body>

</html>

运行如下：

fullPage全屏高度自适应的更多相关文章

  1. fullpage 全屏插件

     fullpage 全屏插件 全屏滚动效果,原生js也很好实现,主要是用 mousewheel 鼠标滚轮滚动事件, 来判断上滚动还是下滚动,之后设置每次滚动的高度为屏幕的高度即可.但是,虽然效果简单, ...

  2. fullpage 单屏高度超过屏幕高度，实现单屏内可以滚动并解决手机端单屏高度不正确的问题

    最近接触了好几次jquery.fullpage.js这个插件,实现整屏的滑动,效果很炫,用fullpage来实现也很简单,但是也碰到了一些问题和大家分享一下 1.单屏高度超过屏幕高度,实现单屏的滑动 ...

  3. 手机端实现fullPage——全屏滚动效果

    封装了一个小插件模拟fullPage的全屏滚动效果,比较简单. 特点: 1.  纯js实现,小巧轻便. 2.  兼容性好.苹果.安卓都没问题,暂时没遇到问题机型. 缺点: 1.  仅封装了基础功能,H ...

  4. div 自动全屏高度

    最近做一个页面,需要一个div自动铺满全屏,但是高度总是难以搞定.查资料为:需要从html body到div 需要 设置 高度属性 为100%

  5. fullPage全屏滚动的实现

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站. 用法: 1.引入jquery 2.引入fullPage 3.每个section代表一屏 4.js启动: ...

  6. jquery.fullpage 全屏滚动

    参考文档 :http://www.dowebok.com/77.html 下载地址: https://github.com/alvarotrigo/fullPage.js 1. 使用 HTML < ...

  7. fullPage 全屏滚动【上下滚动】效果

    由于个人能力,研究了两天,终于写出来了. 又花了一天的时间成功的将30多行脚本,改成了70多行,我也是够有心的了. 那么接下来就是我制作这个效果的全部过程. 那一年我十七,她十八,在那个夏天里,我们, ...

  8. Android Studio gridview 控件使用自定义Adapter, 九宫格items自适应全屏显示

    先看效果图,类似于支付宝首页的效果.由于九宫格显示的帖子网上已经很多,但是像这样九宫格全屏显示的例子还不是太多.本实例的需求是九宫格全屏显示,每个子view的高度是根据全屏高度三等分之后自适应高度,每 ...

  9. 实现全屏轮播，并且轮播div中的文字盒子一直自动垂直居中

    效果如下: 直接上代码了: 说明:轮播图基于swiper.js,自行下载.css在最后 <!DOCTYPE html> <html lang="en"> & ...

随机推荐

  1. jQuery----（类似抽奖转盘）高亮显示

    效果如图: 原图 鼠标进入后开始变化图                                                                              实现需 ...

  2. SAP库龄表

    &---------------------------------------------------------------------* *& Report ZFIR005 *& ...

  3. springboot快速入门（五）——事务管理

    一.入门 概念就不再赘述了,由于一般我们是通过service控制事务,这里给出注解式的示例: package com.example.demo; import com.example.demo.bea ...

  4. 20145209刘一阳《JAVA程序设计》第二周课堂测试

    第二周课堂测试 1.if关键字后面的小括号内,表达式的值可以为10.(B) A .true B .false 2.表达式0xaa | 0x55的值为(C) A .FF B .0 C .255 D .1 ...

  5. 本地使用xshell连接本地虚拟机

    一.环境说明: 操作系统:win10 虚拟软甲:vmware破解版 终端工具:xshell 参考网址:[xshell连接本地虚拟机linux系统][注意事项][手动修改网络配置] 二.连接步骤: 1. ...

  6. linux用户管理（1）----创建用户（adduser和useradd）和删除用户（userdel）

    一.常用命令: (1)创建用户命令两条: adduser useradd (2)用户删除命令: userdel 二.两个用户创建命令之间的区别 adduser: 会自动为创建的用户指定主目录.系统sh ...

  7. 洛咕 P4131 [WC2005]友好的生物

    洛咕 P4131 [WC2005]友好的生物 首先可以发现\(C\)是没有用的,可以乘进所有的权值里面做 考虑没有最后一维的限制,那么两个生物的友好值就是 \(\sum_{i=1}^k|a_i-b_i ...

  8. Hbase第五章 MapReduce操作HBase

    容易遇到的坑: 当用mapReducer操作HBase时,运行jar包的过程中如果遇到 java.lang.NoClassDefFoundError 类似的错误时,一般是由于hadoop环境没有hba ...

  9. pymysql模块使用教程

    一.操作数据库模板 pymysql是Python中操作mysql的模块,(使用方法几乎和MySQLdb相同,但是在Python3中,mysqldb这个库已经不能继续使用了) 下载安装方法: 方法一. ...

  10. $.post(url,[data],[callback],'json')

    $.post(url,[data],[callback],'json')这个写法来做到用post方法传递数据,并取加回json型数据.如果我要取回的数据类型是xml的,就可以写成$.post(url, ...