html,body{height:100%}

今天看到一个CSS样式：html,body{height:100%}，第一次看到，感觉挺奇怪，为什么html还需要设置height:100%呢，html不就是整个窗口吗？我是这样认为的。然后就把html去掉只剩下body的height:100%，麻烦了，页面内容消失了(页面里只有一个空div通过百分比设置height)。

<body>

<div></div>

</body>
<style type="text/css">

*{

margin:0px;

padding:0px;

}

body{

height:100%;

}

div{

    background:#ddd;

    height:50%;

}

</style>

然后在chrome下审查元素，发现如下图：

从图中可以发现，html、body、div三个标签宽、高一致，宽度全屏显示，高度都为0px；

我知道一个事实：一个div块级元素没有主动为其设置宽度和高度，浏览器会为其分配可使用的最大宽度(比如全屏宽度)，但是不负责分配高度，块级元素的高度是由子元素堆砌撑起来的。那么，html和body标签的高度也都是由子级元素堆砌撑起来的。

还有，元素高度百分比需要向上遍历父标签要找到一个定值高度才能起作用，如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用，此时的情况是父元素高度依赖子元素堆砌撑高，而子元素依赖父元素的定高起作用，互相依赖，却都无法依赖，死循环了。

那如何解决这个问题呢，可以让子元素先定高，这样是可以解决；但是如果子元素一定要依赖父元素高度呢？

上面的html代码可以看出，div的父元素是body，body的父元素是html，通过height:100%层层向上，找到顶级获取定高。

所以出现了html和body同时设置height:100%，那html的上级是谁呢？

通过上面的事实知道，浏览器负责分配块级元素宽度，那么浏览器也一定可以分配高度(只是没有做)，那么浏览器本身是有宽度和高度的，设置html的height:100%，就可以获取浏览器的定高了，后面的body和div也就有了依赖。

html,body{

    height:100%;

}

文章参考：http://www.zhangxinxu.com/wordpress/2009/09/%e5%af%b9html%e4%b8%8ebody%e7%9a%84%e4%b8%80%e4%ba%9b%e7%a0%94%e7%a9%b6%e4%b8%8e%e7%90%86%e8%a7%a3/

由html,body{height:100%}引发的对html和body的思考的更多相关文章

  1. table布局 height=100%无效分析

    (从死了一次又一次终于挂掉的百度空间中抢救出来的,发表日期 2014-08-11) 原文链接:http://www.cnblogs.com/gaojun/archive/2012/05/07/2487 ...

  2. CSS高度自适应 height:100%;

    在初次尝试高度自适应时都会遇到这样的问题: 对象的heith:100%; 并不能直接产生实际效果 为什么呢?之所以没有效果,与浏览器的解析方式有一定关系,查看下面代码 <!DOCTYPE htm ...

  3. height:100% 布局

    常常会碰到需要填满整个浏览器,并且自适应高度的需求.首先肯定会想到给容器设定height:100%,但是会没有效果.原因是body没有高度,所以百分比无法生效. 解决方案:给html,body,标签都 ...

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

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

  5. height:100%与height：inherit的区别

    一.兼容性 首先,inherit这个属性只是在ie8+才支持:100%支持ie6: 二.大多数情况下没有区别 在正常情况下height:100%与height:inherit没有任何区别: 1.父元素 ...

  6. 关于 iframe 在ie11 height:100% 无效的巨坑

    好的,今天公司分配了个解决ie中的bug的任务,其中,有一个就是iframe 的高度 100% 没有生效的问题: 一开始,由于我真的没有怎么去了解过iframe这个货,所以,网上各种搜索一大堆关于这货 ...

  7. flex引起height:100%失效

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 父容器根据子容器高度自适应：设置父容器 height:100%;overflow:hidden;

    父容器根据子容器高度自适应:设置父容器  height:100%;overflow:hidden;

  9. height:100%不起作用（无效），div全屏

    当父容器是body时,height:100%不起作用(无效),解决办法:在css代码段中添加 html, body{ margin:0; height:100%; } 实现div全屏的时候需要上面那段 ...

随机推荐

  1. Trie树 字典树-学习笔记

    字符串--蒟蒻永远的阴影 对于字符串匹配 KMP很好的解决了以一个文本串匹配一个模板串的问题 但如果模板串有多个呢 这是KMP不再适用 我们引入一个新的数据结构--字典树 (当然又有像AC自动机这样更 ...

  2. Python报错：IndentationError: expected an indented block

    sum = 0 for x in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]: sum = sum + x print(sum) 代码如上,但是运行报错: 发现是因为少了缩进,改正 ...

  3. C/C++语言的语法基础

    数据类型指明变量或表达式的状态和行为,数据类型决定了数的取值范围和允许执行的运算符集.c++语言数据类型可以分为两大类:基本类型和引用类型.基本类型是指不能再分解的数据类型,其数据在函数的调用中是以传 ...

  4. MYSQL索引的类型和索引的方式

    索引的类型: normal:表示普通索引 unique:表示唯一的,不允许重复的索引,如果该字段信息保证不会重复例如身份证号用作索引时,可设置为unique full textl: 表示 全文搜索的索 ...

  5. logback KafkaAppender 写入Kafka队列,集中日志输出.

    为了减少应用服务器对磁盘的读写,以及可以集中日志在一台机器上,方便使用ELK收集日志信息,所以考虑做一个jar包,让应用集中输出日志 网上搜了一圈,只发现有人写了个程序在github 地址:https ...

  6. DTCMS插件的制作实例电子资源管理（四）URL重写

    总目录 插件目录结构(一) Admin后台页面编写(二) 前台模板页编写(三) URL重写(四) 本实例旨在以一个实际的项目中的例子来介绍如何在dtcms中制作插件,本系列文章非入门教程,部分逻辑实现 ...

  7. SecureCRT8.0设置语法高亮

    SecureCRT默认不显示语法高亮,整个界面颜色单一,用起来很不舒服,也没有效率,所有通过设置一下语法高亮还是很有必要的, 默认字体也看着不是很清晰.所以还是修改一下预告高亮比较好 设置语法高亮,多 ...

  8. 从零开始学习前端JAVASCRIPT — 14、闭包与继承

    一.闭包 1 . 概念:闭包就是能够读取其他函数内部变量的函数.在JS中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解为”定义在一个函数内部的函数”. 2 . 闭包的特点 1)可以读取 ...

  9. 【java学习笔记】文件读写(IO流)

    1.字节流 FileInputStream.FileOutputStream ①FileInputStream import java.io.FileInputStream; public class ...

  10. NLP+词法系列（二）︱中文分词技术简述、深度学习分词实践（CIPS2016、超多案例）

    摘录自:CIPS2016 中文信息处理报告<第一章 词法和句法分析研究进展.现状及趋势>P4 CIPS2016 中文信息处理报告下载链接:http://cips-upload.bj.bce ...