<!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. 【图像处理】Schmid滤波器

    Schmid也是一种类Gabor图像滤波器,在这篇文章[1]中有详细推导和介绍. 一种更简洁的表达公式是: 当中,r为核半径,Z为归一化參数,τ和σ是比較重要的參数,在ReID提取TextFeatur ...

  2. Windows安装TensorFlow遇到错误

    1.先检查系统是64还是32位的,检查python版本是否相符合 2.windows系统上使用tensorflow需要python3.5版本

  3. iOS之让UISearchBar搜索图标和placeholder靠左显示

    系统UISearchBar效果图: 需求效果图: 两种方案: 找到UISearchBar上的放大镜图标, 修改Frame. 同时判断在有无文本内容更改placeholder的颜色. 利用UISearc ...

  4. PHP+MySQL实现海量数据导入导出的总结：is_numbric函数的坑

    前段时间有个需求:将生产环境的部分数据转移到测试服务器进行测试.由于只需要导入特定账号的数据,我就想着将写个脚本,将数据组装成sql语句导出为sql文件,然后转移到测试服务器,导入到MySQL中.想象 ...

  5. Linux | GCC如何实现代码编译&&汇编&&链接过程

      正文: 每次我们程序员所写的 代码 是给程序员看的呢?还是给电脑看的?其实我们所写的代码只是我们程序员之间交流的一样特殊语言,电脑是看不懂的.那么我们如何实现人机交流呢?这就不得不请出我们我们今天 ...

  6. Golang设计模式—简单工厂模式(Simple Factory Pattern)

    Golang设计模式--简单工厂模式 背景 假设我们在做一款小型翻译软件,软件可以将德语.英语.日语都翻译成目标中文,并显示在前端. 思路 我们会有三个具体的语言翻译结构体,或许以后还有更多,但现在分 ...

  7. 20155339 第七周加分项目 mybash的实现

    mybash的实现 要求 使用fork,exec,wait实现mybash 写出伪代码,产品代码和测试代码 发表知识理解,实现过程和问题解决的博客(包含代码托管链接) 学习相关知识 fork函数 查看 ...

  8. Noip前的大抱佛脚----数论

    目录 数论 知识点 Exgcd 逆元 gcd 欧拉函数\(\varphi(x)\) CRT&EXCRT BSGS&EXBSGS FFT/NTT/MTT/FWT 组合公式 斯特林数 卡塔 ...

  9. Linux下开发python django程序(Session读写)

    1.登陆设置session信息 def loginsession(req): if req.method == 'POST': loginform = LoginForm(req.POST) if l ...

  10. 7-[多线程]-Event、定时器、队列、堆栈

    1.Event对象 线程的一个关键特性是每个线程都是独立运行且状态不可预测. 如果程序中的其他线程需要通过判断某个线程的状态来确定自己下一步的操作,这时线程同步问题就会变得非常棘手. 为了解决这些问题 ...