在初次尝试高度自适应时都会遇到这样的问题：
对象的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. apply & call

    一.意义 function.apply(obj,args) obj代替function里this对象 args作为参数传给function 二.实例 1. obj代替function里this对象 f ...

  2. selenium屏蔽谷歌浏览器弹出的通知

    使用chromeoptions来修改浏览器的设置 from selenium import webdriver import time options = webdriver.ChromeOption ...

  3. SMARTFORM 传值的4种方法

    *& 20161019 160300 smartform传值的方法 1.通过结构 传值: 最通常的用法是通过SE11中建立STRUCTURE XXX(表则没用),在REPORT中申明此结构的数 ...

  4. javascript;Jquery;获取JSON对象，无刷新分页，异步加载，异步删除，实例。

    AjaxNewsList: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  5. 20145230 《Java程序设计》第8周学习总结

    20145230 <Java程序设计>第8周学习总结 教材学习内容 NIO与NIO2 NIO使用频道(Channel)来衔接数据节点,在处理数据时,NIO可以设定缓冲区(Buffer)容量 ...

  6. 20145240 《Java程序设计》第四次实验报告

    20145240 <Java程序设计>第四次实验报告 北京电子科技学院(BESTI)实验报告 课程:Java程序设计 班级:1452 指导教师:娄嘉鹏 实验日期:2016.04.26 实验 ...

  7. OC_id类型

     博客正式开通啦!以后会每天为大家更新知识,将过去学习的笔记发布出来.供大家学习交流. 在Objective-C 中,id 类型是一个独特的数据类型.在概念上,类似Java 的Object 类,可以转 ...

  8. Mybatis入门2-动态代理实现CRUD

    MyBatis动态代理生成DAO的步骤: 1) 编写数据管理的接口XxxMapper 2) 编写该接口对应的Mapper.xml a) namespace必须与Mapper接口全名一致 b) stat ...

  9. 初识Spring security-添加security

    请先查看 初识Spring security-无Security的SpringMVC 在pom.xml文件中添加包 <!-- Spring Security --> <depende ...

  10. 正则表达式java,javaScript应用

    dfa nfa 混合:捕获:断言:  正则引擎大体上可分为不同的两类:DFA和NFA,而NFA又基本上可以分为传统型NFA和POSIX NFA.   1.正则语法 捕获组: 没用()的字符都是一个一个 ...