今天做一个小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. ionic $ioniActionSheet 在安卓手机没样式

    解决方法: 添加以下修复css样式 /** * Action Sheets for Android * ------------------------------------------------ ...

  2. volatile底层实现原理

    前言 当共享变量被声明为volatile后,对这个变量的读/写操作都会很特别,下面我们就揭开volatile的神秘面纱. 1.volatile的内存语义 1.1 volatile的特性 一个volat ...

  3. MSSql 保留两位小数的用法

    --MSSql 保留两位小数的用法1: round(@sum,2),2: Convert(decimal(18,2),@sum) select round(9,2)                  ...

  4. HDU 4280 Island Transport(无向图最大流)

    HDU 4280:http://acm.hdu.edu.cn/showproblem.php?pid=4280 题意: 比较裸的最大流题目,就是这是个无向图,并且比较卡时间. 思路: 是这样的,由于是 ...

  5. POJ - 3436 ACM Computer Factory 网络流

    POJ-3436:http://poj.org/problem?id=3436 题意 组配计算机,每个机器的能力为x,只能处理一定条件的计算机,能输出特定的计算机配置.进去的要求有1,进来的计算机这个 ...

  6. andriod开发--使用Http的Get和Post方式与网络交互通信

    package com.example.a350773523.myapplication; import android.os.AsyncTask; import android.support.v7 ...

  7. 疯狂的bLue

    疯狂的bLue Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 众所周知神秘的 ACM 实验 ...

  8. Educational Codeforces Round 68 Editorial

    题目链接:http://codeforces.com/contest/1194                                            A.Remove a Progre ...

  9. 你不得不知道的HashMap面试连环炮

    为什么用HashMap? 简述一下Map类继承关系? 解决哈希冲突的方法? 为什么HashMap线程不安全? resize机制? HashMap的工作原理是什么? 有什么方法可以减少碰撞? HashM ...

  10. 详解JAVA字符串类型switch的底层原理

    基础 我们现在使用的Java的版本,基本上是都支持String类型的.当然除了String类型,还有int.char.byte.short.enum等等也都是支持的.然而在其底部实现中,还是基于 整型 ...