今天做一个小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. ajax调用免费的天气API

    最近在做项目中要用到调用天气接口,在网上找了很多资料之后发现https://www.tianqiapi.com/的天气API挺好的,好用而且免费,调用也很简单.在此做个笔记,大家一起学习交流,如有问题 ...

  2. windows系统查询指定端口运行的进程并关闭

    假如占用的端口是80: 先打开cmd命令窗口 再查找80端口占用的进程:netstat  -aon|findstr  "80"    ,找到对应的程序的PID号: 根据PID号找到 ...

  3. 转载-SpringBoot开发案例之整合日志管理

    转载:https://cloud.tencent.com/developer/article/1097579 有一种力量无人能抵挡,它永不言败生来倔强.有一种理想照亮了迷茫,在那写满荣耀的地方. 00 ...

  4. NLP(十二)指代消解

    代词是用来代替重复出现的名词 例句: 1.Ravi is a boy. He often donates money to the poor. 先出现主语,后出现代词,所以流动的方向从左到右,这类句子 ...

  5. C# 生产者与消费者模式

    情景:一个线程不断获取数据,另一个线程不断处理这些数据. 常规方法:数据列表加锁,两个线程获取锁,拿到操作权:类似代码如下:(不推荐) static void Main(string[] args) ...

  6. codeforce375div2-D. Lakes in Berland 搜索

    Lakes in Berland 题意与解释:这道题就是求图中被围起来的点群,问最少去掉几个点,可以使得孤立的点群数目为K; 因为自己写的代码又长又had bugs. 我自己写的bfs,想着是先染色, ...

  7. HDU 4289 Control 最小割

    Control 题意:有一个犯罪集团要贩卖大规模杀伤武器,从s城运输到t城,现在你是一个特殊部门的长官,可以在城市中布置眼线,但是布施眼线需要花钱,现在问至少要花费多少能使得你及时阻止他们的运输. 题 ...

  8. PyCharm 安装常用设置

    一.Pycharm (一).安装 1.在百度找到PyCharm官网,http://www.jetbrains.com 2.下载 3.选择版本(根据自己的喜好选择,我这里选的是其他版本,2017年3月专 ...

  9. Java深拷贝与序列化

    对基本类型的变量进行拷贝非常简单,直接赋值给另外一个对象即可: int b = 50; int a = b; // 基本类型赋值 对于引用类型的变量(例如 String),情况稍微复杂一些,因为直接等 ...

  10. 基础知识:CSRF漏洞

    CSRF漏洞概述 CSRF漏洞是跨站请求伪造攻击,能够对攻击用户的增.删.改,不能攻击查.为什么呢?根据其原理,攻击者是发一个链接给用户,用户点击这个链接而执行危险的操作,信息并不会返回到攻击者的电脑 ...