纯CSS实现的自适应高度布局，中间内容不符自动滚动条。兼容IE9以上、chrome、FF。关键属性是box-sizing: border-box。

不废话，直接上代码：

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<style>

    *{padding:0;margin:0}

    .head{

        height:90px;

        background: #090;

        position: absolute;

        width: 100%;

    }

    .content{

        height:100%;

        background: #808;

        position: absolute;

        width: 100%;

        padding:90px 0 30px 0;

        box-sizing: border-box;

        z-index: -1;

    }

    .foot{

        height:30px;

        background: #890;

        position: fixed;

        bottom:0;

        width: 100%;

    }

    .cnt{

        height:100%;

        overflow: auto;

    }

</style>

<body>

<div class="head">Head</div>

<div class="content">

    <div class="cnt">

        内容<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

        内容<br/>

        <div>div here</div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

        内容<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

        内容<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

        内容<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

        内容

    </div>

</div>

<div class="foot">Foot</div>

</body>

</html>

简单而兼容性好的Web自适应高度布局，纯CSS的更多相关文章

  1. 从三栏自适应宽度布局到css布局的讨论

    如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...

  2. 经历：easyui的layout自适应高度布局

    在使用easyui的layout布局的时候,在某种情况下,我们会在后续的逻辑中修改一下layout的某个region的高度,那么该怎么做呢?  我就遇到了这样的情况,今天需求经理提出了一个需求:认证用 ...

  3. 移动端web自适应适配布局解决方案

    100%还原设计图,要注意: 看布局,分析结构. 感觉难点在于: 1.测量精度(ps测量数据): 2.文字的行高. 前段时间写个移动端适配的页面(刚接触这方面),查了一些资料,用以下方法能实现: 1. ...

  4. Html-Css-iframe的自适应高度方案

    先看一个示例,有两个页面,1.html通过iframe嵌入2.html,两个页面都是同域的 a.html <!DOCTYPE html> <html> <head> ...

  5. js实现iframe自适应高度

    转自:http://www.jb51.net/article/15780.htm 对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的! 不带边框的iframe因为能 ...

  6. iframe自适应高度的多种方法方法小结

    对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的  不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 ifram ...

  7. iframe自适应高度的多种方法方法小结（转）

    对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的 ...

  8. 从web移动端布局到react native布局

    在web移动端通常会有这样的需求,实现上中下三栏布局(上下导航栏位置固定,中间部分内容超出可滚动),如下图所示: 实现方法如下: HTML结构: <div class='container'&g ...

  9. 浅谈Web自适应

    前言 随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置.移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率不一样.这给我们在编写前端界面时增加了困难, ...

随机推荐

  1. java5

    1:final关键字(掌握) (1)是最终的意思,可以修饰类,方法,变量. (2)特点: A:它修饰的类,不能被继承. B:它修饰的方法,不能被重写. C:它修饰的变量,是一个常量. (3)面试相关: ...

  2. WPF CollectionViewSource CollectionView

    CollectionView 通俗讲就是可以对你绑定的集合可以进行 分组,排序 等功能 CollectionViewSource  根据字面意思是xxx的数据源 详细的介绍还是看 http://www ...

  3. LVS集群之NAT模式实现

    LVS集群之NAT模式实现 一.集群的种类 集群系统主要分为 1.HA:高可用集群,又叫双机热备.   (a)原理      2台机器A,B,正常是A提供服务,B待命闲置,当A宕机或服务宕掉,会切换至 ...

  4. 【目录】python

    python 入门学习(一) 入门学习(二) 入门学习(三) 入门学习(四) 入门学习(五) 入门学习(六) 入门学习(七) 入门学习(八) 入门学习(九) 入门学习(十) Head First Py ...

  5. Unix系统引导过程（简单步骤）

    1.从MBR中读取引导加载程序(boot loader) 2.初始化内核 3.硬件检测 4.创建内核进程 5.系统管理员干预(仅仅在进入单用户模式或者恢复模式的时候) 6.执行系统启动脚本

  6. 给11gR2 Dataguard打psu补丁的步骤及注意事项

    参考文档278641.1 0.备份备主备库的spfile备份主库的数据 1.在主库上暂停向备库传日志alter system set log_archive_dest_state_X=defer sc ...

  7. Source Insight编辑器配置

    Sublime Text 无疑是一款很优秀的编辑器和阅读器,可惜对于中文编码不支持,网上的ConvertTOUTF8存在BUG,经常转码失败,体验很不好. 现在开始使用source insight,这 ...

  8. [工作中的设计模式]中介模式模式Mediator

    一.模式解析 用一个中介者对象封装一系列的对象交互,中介者使各对象不需要显示地相互作用,从而使耦合松散,而且可以独立地改变它们之间的交互. 中介模式又叫调停者模式,他有如下特点: 1.有多个系统或者对 ...

  9. ArcGIS 10与ArcEngine 10安装及破解

    1 2 3 4 5 分步阅读 一键约师傅 百度师傅高质屏和好师傅,拯救你的碎屏机 百度经验:jingyan.baidu.com 现在常见的破解方法在下面的地址中已经详细附图说明了,但是这种破解方法,想 ...

  10. dedecms为什么文档标题最大长度只能显示二十个汉字呢？

    今天遇到文章标题无论怎么修改,超出二十个汉字不能全部保存,系统只截取前二十个汉字的内容进行保存. 在后台查看系统设置: 系统——其它选项——文档标题最大长度,的值是60,对应的数据库表字段char的长 ...