纯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. C#转义字符(Z)

    所有的ASCII码都可以用“\”加数字(一般是8进制数字)来表示.而C中定义了一些字母前加"\"来表示常见的那些不能显示的ASCII字符,如\0,\t,\n等,就称为转义字符,因为 ...

  2. HTML CSS SPRITE 工具

    推荐一个CSS SPRITE工具 网盘分享:http://pan.baidu.com/s/1sjx7cZV

  3. placeholer 换行

    如果需要placeholder 换行: 代码: <textarea class="desc_content"maxlength="50" placehol ...

  4. October 20th Week 43rd Thursday, 2016

    Now, it's clear. OPPO R9s 这一刻 更清晰. I want a new mobile phone, because the one I am using is broken. ...

  5. @Controller和@RestController的区别

    1. Controller, RestController的共同点 都是用来表示spring某个类的是否可以接收HTTP请求 2.  Controller, RestController的不同点 @C ...

  6. 使用json把php数据传给js处理

    先创建下面的两个文件,并将代码拷贝进去,然后打开json.html文件: json.html文件: <!DOCTYPE html> <html> <head> &l ...

  7. HTTP TCP UDP Socket 关系的几个经典图

      从上图可以看到,TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层. 在网络层有IP协议.ICMP协议.ARP协议.RARP协议和BOOTP协议. 在传输层中有TCP协议与UDP协议. ...

  8. Java的RMI远程方法调用实现和应用

    最近在学习Dubbo,RMI是很重要的底层机制,RMI(Remote Method Invocation)远程方法调用是一种计算机之间利用远程对象互相调用实现双方通讯的一种通讯机制.使用这种机制,某一 ...

  9. Python 迭代器 & __iter__方法

    转载来自: http://blog.csdn.net/bluebird_237/article/details/38894617 迭代器就是重复地做一些事情,可以简单的理解为循环,在python中实现 ...

  10. WPF程序在Windows 7下应用Windows 8主题

    这篇博客介绍如何在Windows 7下应用Windows 8的主题. 首先我们先看一个很常见的场景,同样的WPF程序(样式未重写)在不同的操作系统上展示会有些不同.这是为什么呢?WPF程序启动时会加载 ...