纯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. SQLite批量插入优化方法

    SQLite的数据库本质上来讲就是一个磁盘上的文件,所以一切的数据库操作其实都会转化为对文件的操作,而频繁的文件操作将会是一个很好时的过程,会极大地影响数据库存取的速度.   例如:向数据库中插入10 ...

  2. WCF 定义SOAP和REST风格的webservice

    摘抄于其他帖子,在此记录以备后用. 1. 定义服务数据契约(SOAP与REST方式相同)  public class Employee   { [DataMember]       public st ...

  3. 基于 React.js + Redux + Bootstrap 的 Ruby China 示例 (转)

    一直学 REACT + METEOR 但路由部分有点问题,参考一下:基于 React.js + Redux + Bootstrap 的 Ruby China 示例 http://react-china ...

  4. 我常用的crontab命令

    命令简介 crontab-操作每个用户的守护程序和该执行的时间表.部分参数说明crontab file [-u user]-用指定的文件替代目前的crontab.crontab-[-u user]-用 ...

  5. Windows下几款免费C/C++开发工具简介

    我相信作为编程初学者,我们都希望有好用的编程软件.这里"好用"应该至少要满足两点:1.安装简单,2.使用方便.大神移驾,对工具有特殊偏好跳过,从来不用Windows的止步.本文不做 ...

  6. Apache shiro 文章推荐

    均为系列文章,篇幅略长,适合入门. shiro源码分析 跟我学shiro

  7. NEFU 558 迷宫寻路

    题目链接 简单搜索题 #include <cstdio> #include <iostream> #include <cstring> using namespac ...

  8. Delphi 控件大全

    delphi 控件大全(确实很全)   delphi 控件查询:http://www.torry.net/ http://www.jrsoftware.org Tb97 最有名的工具条(ToolBar ...

  9. javascript推荐书籍

    本文转载自http://www.cnblogs.com/zfc2201/archive/2012/07/22/2604236.html感谢作者 WEB前端研发工程师,在国内算是一个朝阳职业,这个领域没 ...

  10. MySQL存储引擎之Myisam和Innodb总结性梳理

    Mysql有两种存储引擎:InnoDB与Myisam,下表是两种引擎的简单对比   MyISAM InnoDB 构成上的区别: 每个MyISAM在磁盘上存储成三个文件.第一个 文件的名字以表的名字开始 ...