今天做一个小demo,需要给body设置高度为100%,然鹅发现只设置body的height不可行,需,html,body{height:100%;}
为何呢?
一个容器的height是从上一级继承而来的,html{height:100%}中设置的html的高度是相对于浏览器来说,而body中的高度又从html中继承,指的是页面的高度。

在查资料时,也发现比较有趣的一点:
当html标签无背景样式时,body的背景色其实不是body标签的背景色,而是浏览器的。
一旦html标签含有背景色,则body的背景色变成了正常的body标签自己的背景色,而此时的html标签最顶级,背景色被浏览器获取,成为浏览器的背景色。
简单的说就是,html优先于body标签,浏览器按html>body的顺序提取其设置的背景样式作为浏览器的背景,也就是用户能看到的背景。

给body设置高度的更多相关文章

  1. 如何给span设置高度宽度?

    内容提要:给Span设置高度和宽度后没有作用.本文介绍了如何如何给span设置高度宽度. CSS模型中经常用的容器是DIV和span. 给Span设置高度和宽度后没有作用. <style typ ...

  2. div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法(借鉴)

    原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度, ...

  3. 对Iframe和图表设置高度的优质代码

    //对Iframe和图表设置高度 function f() { parent.window.setWinHeight(parent.window.document.getElementById(&qu ...

  4. Chrome&FF&Opera&下DIV不设置高度显示背景颜色和边框的办法

    今天在排版的时候,外层的div不写高度的话背景颜色和边框没法办法显示,但是在IE下面就可以,这个有三个解决办法. 第一: 直接给最外层的div设置高度(不推荐). 第二: 在内部每个div后添加一个清 ...

  5. pickView不需要明确设置高度

    pickView不用设置高度,若设置了,在iOS8.4.1上不会被填充,会造成没有把pickView高度设置成你想要的,但是布局其他地方的时候却会从你设置的地方开始,就会造成布局不紧挨着或者遮盖着的效 ...

  6. HTML的TextArea标记跟随文本内容自动设置高度

    js <textarea name="textarea" id="textarea" style='overflow-y: hidden;height:2 ...

  7. 关于ckeditor5设置高度

    在管理端模板AdminBSBMaterialDesign-master里发现一个比百度编辑器看起来更高大上的编辑器:ckeditor.模板中使用的是版本4,自己在官网上下载了最新版本.在之前的版本,使 ...

  8. ueditor 设置高度height. ue.setHeight(400); 设置宽度 width

    1.引入的文件: <script type="text/javascript" src="../../dist/ueditor1_4_3-utf8-php/uedi ...

  9. 控件View动态设置高度时会卡顿、速度慢的情况解决

    今天碰到这种情况,一直想不通是什么问题,之前一直设置高度的时候也不卡为何今天就这么卡了.做了很多小示例一直是很慢,后来试着把View的上级节点RelativeLayout的替换成了LinearLayo ...

  10. select设置高度的兼容问题

    在IE678下,我们给select设置高度的话,里面的option无法居中,折中的兼容方式就是,我们给select的border:0:外面套一层div,这个div给他设置padding,让select ...

随机推荐

  1. Scala 系列(六)—— 常用集合类型之 List & Set

    一.List字面量 List 是 Scala 中非常重要的一个数据结构,其与 Array(数组) 非常类似,但是 List 是不可变的,和 Java 中的 List 一样,其底层实现是链表. scal ...

  2. Dig命令使用大全(转自别人翻译),稍加整理

    Dig简介:   Dig是一个在类Unix命令行模式下查询DNS包括NS记录,A记录,MX记录等相关信息的工具.由于一直缺失Dig man page文档,本文就权当一个dig使用向导吧.   Dig的 ...

  3. python爬取豆瓣首页热门栏目详细流程

    记录一下爬取豆瓣热门专栏的经过,通过这篇文章,你能学会requests,HTMLParser,json的基本使用,以及爬取网页内容的基本思路. 使用模块 1,获取豆瓣首页代码:首先我们需要访问豆瓣页面 ...

  4. Delphi - cxGrid连接Access数据库

    一.添加控件: ADOConnection.ADOQuery和DataSource: 二.连接Access数据库: 这里一般采用动态方式进行连接,工程文件放在了CodeDemo文件夹中,Access数 ...

  5. 基于Taro与typescript开发的网易云音乐小程序(持续更新)

    基于Taro与网易云音乐api开发,技术栈主要是:typescript+taro+taro-ui+redux,目前主要是着重小程序端的展示,主要也是借此项目强化下上述几个技术栈的使用,通过这个项目也可 ...

  6. POJ-2155-Matrix二位树状数组应用

    题目: 一个只有0和1构成的二维平面,给你两种指令,一种是区间的更新,即0变为1,1变为0:一种是查询一个点是1还是0: 由于是二进制,所以每次更新在相应的点上加一,最后对2取余即可. 至于二维的树状 ...

  7. HDU-3038How Many Answers Are Wrong权值并查集

    How Many Answers Are Wrong 题意:输入一连串的区间和,问和前面的矛盾个数: 思路:我在做专题,知道是并查集,可是还是不知道怎么做,学了一下权值并查集和大佬的优秀思路,感觉回了 ...

  8. CF982C Cut 'em all! DFS 树 * 二十一

     Cut 'em all! time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  9. Array List和Linked List实现分析

    一,前言 ​ 先来一张Collection集合图. ​ 今天分享一些关于Collection集合中的List,讲真的集合这东西在网上真是老生常谈了.说实话连本人都觉得腻了(哈哈),但是话又说回来,整个 ...

  10. CH4301 Can you answer on these queries III 题解

    给定长度为N的数列A,以及M条指令 (N≤500000, M≤100000),每条指令可能是以下两种之一: "2 x y",把 A[x] 改成 y. "1 x y&quo ...