在初次尝试高度自适应时都会遇到这样的问题：
对象的heith:100%; 并不能直接产生实际效果

为什么呢？
之所以没有效果,与浏览器的解析方式有一定关系,查看下面代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>一列布局</title>

        <style>

            html,

            body {

                margin: 0;

                padding: 0;

                width: 100%;

                height: 100%;

            }/*这里是关键*/

            #layout {

                background-color: #cccccc;

                /*border: 2px solid #333333;*/

                margin: 0 auto;

                width: 80%;

                height: 100%;

            }

        </style>

    </head>

    <body>

        <div id="layout"></div>

    </body>

</html>

　　一个对象的高度是否可以使用百分比显示,取决于对象的父级对象.在页面中,#layout 是直接放置在body之中,因此它的父级对象
是body,在默认状态下,浏览器并没有给bodyy一个高度属性,因此我们所设置的#layout为height:100%;并不会产生任何效果.但是
一旦我们给body设置了100%之后,它的子级对象#layout 的height:100%;便发生了作用了,这便是浏览器解析规则引发的高度自适应
问题.

　　代码中除了给body定义了100%之外,还给html对象也应用了想吐的样式定义,这样做的好处是,使用IE与firefox浏览器都能够实现
高度自适应,IE与firefox对页面对象的解析方式存在一定差异.在IE中,html对象默认为100%的高度，body却不是.而在firefox中,
html标签却不是100%高度,因此我们给两个标签都定义为height:100%;，这样可以保证两款浏览器下均能够正常工作.

注：float元素 空白边不叠加

CSS高度自适应 height:100%;的更多相关文章

  1. 【CSS系列】height:100%设置div的高度

    一.div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的.这个是因为body高度默认值为自适应的,所以及时设置bo ...

  2. CSS中设置height:100%无效的解决方案

    在网页设计中有时会设置某个DIV或者TABLE的高度自适应,即元素的高度充满父元素的高度.一般使用设置CSS  height:100%来实现.但是当元素层级嵌套比较深的时候,设置该属性并不能得到应有的 ...

  3. css高度自适应

    何为高度自适应? 高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容.高度自适应不像宽度自适应那样简单,在 ...

  4. CSS 如何让 height:100%; 起作用

    当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 按常理,当我们用 ...

  5. 如何让div中的span垂直居中 ----height:100%设置div的高度

    如果div中只有一个span一个元素,可以使用line-height.如果div中还有其他元素,可以设置span的css如下: .span{ position: absolute; top: 50%; ...

  6. css height:100%和height:auto的区别

    css height:100%和height:auto的区别 height:auto,是指根据块内内容自动调节高度.height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高 ...

  7. 设置height:100%无效的解决方法

    设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...

  8. table和div设置height:100%无效的完美解决方法

    刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:"100%"也无效,为什么会这样呢 ...

  9. 关于height:100%不生效的问题

    当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 按常理,当我们用 ...

随机推荐

  1. matlab学习笔记之基础知识（一）

    一.两种特殊数据类型 1.元胞数组   元胞数组是MATLAB的一种特殊数据类型,可以将元胞数组看做一种无所不包的通用矩阵,或者叫做广义矩阵.组成元胞数组的元素可以是任何一种数据类型的常数或者常量,每 ...

  2. 学习pyhton需要做哪些准备工作

    1:知道python个版本是有差异的 2:既然有差异,那么如何在不同项目不同版本的开发环境; ----------------------------------------------------- ...

  3. Nginx图片及样式文件不记录访问日志

    1.Nginx作为web服务器是可直接在server配置文件中做如下配置: server { listen ; server_name www.fansik.com; access_log /data ...

  4. [笔记]一道C语言面试题：IPv4字符串转为UInt整数

    题目:输入一个IPv4字符串,如“1.2.3.4”,输出对应的无符号整数,如本例输出为 0x01020304. 来源:某500强企业面试题目 思路:从尾部扫描到头部,一旦发现无法转换,立即返回,减少无 ...

  5. LeetCode：螺旋矩阵【54】

    LeetCode:螺旋矩阵[54] 题目描述 给定一个包含 m x n 个元素的矩阵(m 行, n 列),请按照顺时针螺旋顺序,返回矩阵中的所有元素. 示例 1: 输入: [ [ 1, 2, 3 ], ...

  6. $百度应用引擎BAE的使用与应用部署

    百度应用引擎(BAE)是百度推出的网络应用开发平台,开发者使用BAE不需要进行服务器的配置.维护等繁琐的工作,也不需要进行域名的申请.备案等工作,而只需要上传自己的WEB应用即可在公网上访问.使用及部 ...

  7. 验证——正则<37>

    1,郵箱合法性驗證 /* * 郵箱合法性驗證 * @method matchTel * @papram{string} str,電子郵箱 * @return{boolean} * */ functio ...

  8. 【Tech】POI标签分类

    寒假老板给的任务,让我重现这个实验http://www.liuhaihua.cn/archives/15565.html.自己就随便试了下,用的都是比较经典(lao)的算法和知识,记录一下. 一.从网 ...

  9. JS 中 Date() 的其他操作集锦

    好吧,这周完全是个业务型的程序猿了,明显地能感觉到洗头发时头皮都会有点疼,是秃顶的前兆. 算得上收获的就是有较多的接触到计算时间方面的事件...嗯,几个笔记分享一下 // 处理 /Date(" ...

  10. PHP面试题 – 培训学校真实面试内部资料

    1.PHP解析URL是哪个函数? parse_url() 是讲URL解析成有固定键值的数组的函数. $ua=parse_url('http://username:password@hostname/p ...