<!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. c++赋值运算符为什么要返回引用？

    为什么赋值运算符要返回引用?? 因为赋值操作会改变左值,而 + 之类的运算符不会改变操作数,所以说赋值运算符重载要返回引用以用于类似 (a=b)=c 这样的再次对a=b进行写操作的表达式.+ 返回一个 ...

  2. win7-x64上MySql的初次安装

    1.官网:https://dev.mysql.com/downloads/mysql/下载对应的zip包 2.将包解压缩到本地,如:F:\mysql\mysql-8.0.15-winx64 3.配置环 ...

  3. Linux基础入门 第二章 Linux终端和shell

    Linux终端 进入编辑IP地址命令:vi /etc/sysconfig/network-scripts/ifcfg-eth0 按键“i”:进行编辑 按键“ESC”:退出编辑  按键“:”:输入wq, ...

  4. 使用JS与jQuery实现文字逐渐出现特效

    该需求出现原因:想要实现一个在一开始加载页面时就出现一行文字逐渐出现的效果,且需要实现的是一种逐渐的过渡出现效果为不是一种生硬的突然间歇性出现.于是便开始尝试利用最近正在学习的jQuery技术和JS实 ...

  5. 6.Exceptions-异常(Dart中文文档)

    异常是用于标识程序发生未知异常.如果异常没有被捕获,If the exception isn't caught, the isolate that raised the exception is su ...

  6. 读取和修改app.config文件

    本处主要是指读取和修改appSettings节点: 读取: string port = ConfigurationManager.AppSettings["port"];  //p ...

  7. 大数据入门第八天——MapReduce详解（四）本地模式运行与join实例

    一.本地模式调试MR程序 1.准备 参考之前随笔的windows开发说明处:http://www.cnblogs.com/jiangbei/p/8366238.html 2.流程 最重要的是设置Loc ...

  8. Android 读取Assets下的资源文件

    做Android开发近半年了,东西越学越多,硬盘容量越来越小.很多东西找起来也不方便,为此,我打算从今天起把工作中学到的东西整理起来,写成日记.也希望与广大网友分享我的经验.一同进步.今天主要介绍文件 ...

  9. Noip前的大抱佛脚----文章索引

    Noip前的大抱佛脚----赛前任务 Noip前的大抱佛脚----考场配置 Noip前的大抱佛脚----数论 Noip前的大抱佛脚----图论 Noip前的大抱佛脚----动态规划 Noip前的大抱佛 ...

  10. 微信小程序：text元素中加入空格

    在text标签中加入 decode = "{{true}}" ,然后字啊需要加入空格的地方使用   即可加入一个空格,可以连续用多个例如: <text decode = &q ...