<!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. Linux—rm命令

    rm作用:用于删除一个文件或者目录,文件一旦通过rm命令删除,则无法恢复,所以必须格外小心地使用该命令.并且时刻清醒注意自己在哪个目录下面!! 命令格式:rm [选项] name 参数: -i 删除前 ...

  2. 2017-2018-1 20155210 《信息安全系统设计基础》 实现mypwd

    2017-2018-1 20155210 <信息安全系统设计基础> 实现mypwd 作业要求: 1.学习pwd命令 2.研究pwd实现需要的系统调用(man -k; grep),写出伪代码 ...

  3. 20155211 课下测试ch12补做

    20155211 课下测试ch12补做 有关线程图,下面说法正确的是() A.图的原点表示没有任何线程完成一条指令的初始状态 B.向右向上是合法的转换 C.向左向下是合法的转换 D.对角线是合法的转换 ...

  4. 20155214 2016-2017-2 《Java程序设计》第10周学习总结

    学号 2016-2017-2 <Java程序设计>第10周学习总结 教材学习内容总结 掌握Java Socket编程 理解混合密码系统 掌握Java 密码技术相关API的使用 教材学习中的 ...

  5. spark遇到的一些问题及其解决办法

    1.报错:ERROR storage.DiskBlockObjectWriter: Uncaught exception while reverting partial writes to file ...

  6. Redis架构之防雪崩设计：网站不宕机背后的兵法

    互联网系统中不可避免要大量用到缓存,在缓存的使用过程中,架构师需要注意哪些问题?本文以 Redis 为例,详细探讨了最关键的 3 个问题. 一.缓存穿透预防及优化 缓存穿透是指查询一个根本不存在的数据 ...

  7. Sklearn环境搭建与常用包

    开发环境搭建 直接安装Anaconda IPython IPython是公认的现代科学计算中最重要的Python工具之一.它是一个加强版的Python交互命令行工具,有以下几个明显的特点: 1. 可以 ...

  8. Linux之linux入门

    学习linux之前先了解一下操作系统: 操作系统的定义:         操作系统(英语:operating system,缩写作 OS)是管理计算机硬件与软件资源的计算机程序,同时也是计算机系统的内 ...

  9. 在vsphere6.5启用Tesla K80

    基础环境: vsphere6.5 VMware vCenter6.5 宝德服务器2750S Tesla K80 0x01 选择主机,配置→硬件→PCI设备→添加K80显卡 注意:1.添加完显卡后,主机 ...

  10. 使用AD对Linux客户端进行身份验证

    https://technet.microsoft.com/zh-cn/library/2008.12.linux.aspx