纯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. ecshop常用二次开发修改

    修改ecshop支付宝的支付按钮  http://www.68ecshop.com/article-1081.html 去掉ecshop收货人信息页面的电子邮件必填和电话.手机选填一个  http:/ ...

  2. How to install OpenBazaar Server in CentOS7

    helps from: https://github.com/OpenBazaar/OpenBazaar-Server http://stackoverflow.com/questions/24917 ...

  3. 在react native用到的javascript 的一些关键知识（整理中）

    发现了一个讲解javascript的好网站,分享一下,讲的非常棒! 注意,这些文章都可以选择中文进行阅读! 下面这个连接是关于prototype的: https://developer.mozilla ...

  4. Java enum的用法详解[转]

    Ref:http://www.cnblogs.com/happyPawpaw/archive/2013/04/09/3009553.html 用法一:常量 在JDK1.5 之前,我们定义常量都是: p ...

  5. HBASE列族不能太多的真相 （一个table有几个列族就有几个 Store）

    HRegionServer内部管理了一系列HRegion对象,每个HRegion对 应了table中的一个region,HRegion中由多 个HStore组成.每个HStore对应了Table中的一 ...

  6. 根据google地图抓去全国信息- 抓去全国小区以及新建楼盘信息

    本案例由于google每天每个账户能post20000次所以我们需要相对较长的时间来抓去google的数据信息. 主要思路:通过一定的zoom一个相对较大的zoom.我们尽可能的搜索我们的所有数据. ...

  7. Hadoop学习笔记(1) 初识Hadoop

    1. Hadoop提供了一个可靠的共享存储和分析系统.HDFS实现存储,而MapReduce实现分析处理,这两部分是Hadoop的核心. 2. MapReduce是一个批量查询处理器,并且它能够在合理 ...

  8. springMVC含文件上传调用ajax无法连接后台

    springMVC在使用ajax进行后台传值的时候发现找不到对应的requestMapping(""),无法进入后台,在多次试验后确定是 MultipartFile对象与ajax冲 ...

  9. 如何在UMG蓝图中动态创建控件

    把控件作为UObject即可,在c++中则使用NewObject函数

  10. python操作mongodb数据库

    一.MongoDB 数据库操作 连接数据库 import pymongo conn = pymongo.Connection() # 连接本机数据库 conn = pymongo.Connection ...