<!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. 差异是关键，TI首款隔离式CAN收发器评析

    差异是关键,TI首款隔离式CAN收发器评析           “无论是在日常生活还是媒体报道中, CAN接口对大家来说已经司空见惯了,然而将CAN接口和隔离功能整合在同一产品里,这还是业界头一遭,” ...

  2. display:inline、block、inline-block的区别（摘抄）

    display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...

  3. go语言实战笔记(二)

     码代码之前一定要安装go,哈哈哈哈,反正我只装goland然后写不了代码报错,卡在第一段代码哈哈哈哈哈哈 新建项目goproject 新建src文件夹 新建main文件夹 新建第一个go文件 开始写 ...

  4. goalng nil interface浅析

    0.遇到一个问题 代码 func GetMap (i interface{})(map[string]interface{}){ if i == nil { //false ??? i = make( ...

  5. 查内存命令之free

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL杂记页     回到顶级页面:PostgreSQL索引页 [作者 高健@博客园  luckyjackgao@gmail. ...

  6. Velocity的学习1

    Velocity 是一个基于Java的的模板引擎,通过特定的语法,速度可以获取在的Java语言中定义的对象,从而实现界面和Java的代码的真正分离,这意味着可以使用Velocity替代JSP的开发模式 ...

  7. Wannafly挑战赛5 D. 子序列

    D. 子序列 链接 #include<cstdio> #include<algorithm> #include<cstring> #include<iostr ...

  8. JNDI是什么，怎么理解

    JNDI 是什么 JNDI是 Java 命名与目录接口(Java Naming and Directory Interface),在J2EE规范中是重要的规范之一,不少专家认为,没有透彻理解JNDI的 ...

  9. Windows：打开MSDTC，恢复Windows任务栏，查看windows日志，打开远程桌面，打开Services，资源监控

    Windows 服务器系列: Windows:查看IP地址,IP地址对应的机器名,占用的端口,以及占用该端口的应用程 Windows:使用Dos命令管理服务(Services) Windows:任务调 ...

  10. 处于同一域中的两台SQL Server 实例无法连接

    处于同一个域中的两台Sql server 实例无法连接,报的错误信息如下: A network-related or instance-specific error occurred while es ...