我们都知道需要给html和body标签设置了高度height:100%之后,再给内部的div设置height:100%的时候,内部div的高度100%才会起到作用。这是由于:%是一个相对父元素计算得来的高度,要想使他有效,我们需要设置父元素的height。解决如下:

  1. html,body{
  2. height: 100%;
  3. margin: 0;
  4. padding: 0;
  5. }

那么浏览器是如何计算高度和宽度的?

Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度。即我们不设置宽,会自动填满整个横向宽度 。

但是高度的计算方式完全不一样。事实上,浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则,浏览器就会简单的让内容往下堆砌,页面的高度根本就无需考虑。
因为页面并没有缺省的高度值,所以,当你让一个元素的高度设定为百分比高度时,无法根据获取父元素的高度,也就无法计算自己的高度。

即父元素的高度只是一个缺省值:height: auto;我们设置height:100%时,是要求浏览器根据这样一个缺省值来计算百分比高度时,只能得到undefined的结果。也就是一个null值,浏览器不会对这个值有任何的反应。

css中 出现height为100%失效的原因及解决方案的更多相关文章

  1. CSS难点 为什么height设置100%会失效,分栏目等高布局(高度自适用布局)的实现方案

    前言 相信在平时写CSS的时候大家都或多或少遇见过设置了height为百分比的时候发现不起作用.今天我们就来一探究竟 原因:父元素未设置具体高度,子元素设置height:100%是无效的. 现象以及方 ...

  2. CSS中设置height:100%无效的解决方案

    在网页设计中有时会设置某个DIV或者TABLE的高度自适应,即元素的高度充满父元素的高度.一般使用设置CSS  height:100%来实现.但是当元素层级嵌套比较深的时候,设置该属性并不能得到应有的 ...

  3. CSS中的height与line-height的区别

    <p class='text'>高与行高的区别</p> 那么我要想让这些字上下居中那么可以用宽度和行高控制 .text{ height:25px; line-height:25 ...

  4. jquery checkbox反复调用attr('checked', true/false)只有第一次生效 Jquery 中 $('obj').attr('checked',true)失效的几种解决方案

    1.$('obj').prop('checked',true) 2. $(':checkbox').each(function(){ this.checked=true; }) 为什么:attr为失效 ...

  5. css 中 overflow: hidden清楚浮动的真正原因

    1. 先上一段代码清楚浮动的代码, 外层ul设置overflow为hidden, 内层li设置float为left左浮动 <!DOCTYPE html> <html> < ...

  6. Jquery 中 $('obj').attr('checked',true)失效的几种解决方案

    转载自:搜狐博客 大拙无为 1.$('obj').prop('checked',true) 2. $(':checkbox').each(function(){ this.checked=true; ...

  7. UE4中Bebavior Tree中Delay及其后面代码失效的原因

    具体原因是因为节点的执行过程中,该节点及其父节点的Decorator条件不满足,而节点又受到flow control的影响,导致中途强制结束了Task节点的执行,具体如下. UE4中的Behavior ...

  8. Mac的VIM中delete键失效的原因和解决方案

    在Mac的键盘上实际是没有backspace这个键的.其实Mac的delete就是Windows的backspace,实现的都是向左删除的功能.Mac上如果要实现向右删除的功能需要使用⌘+delete ...

  9. wpf 绑定失效的原因及解决方案

    有时候,您会发现在程序开始时还能正常运行的绑定失效了.就个人经验而言,绑定的失效主要分为两种情况:对于One-way绑定而言,如果软件开发人员绕过绑定直接更改了目标属性,那么绑定将会失效.而对于Two ...

随机推荐

  1. 第八届蓝桥杯JavaB组省赛真题

    解题代码部分来自网友,如果有不对的地方,欢迎各位大佬评论 题目1.购物单 题目描述 小明刚刚找到工作,老板人很好,只是老板夫人很爱购物.老板忙的时候经常让小明帮忙到商场代为购物.小明很厌烦,但又不好推 ...

  2. java中Timer类的详细介绍(详解)

    一.概念 定时计划任务功能在Java中主要使用的就是Timer对象,它在内部使用多线程的方式进行处理,所以它和多线程技术还是有非常大的关联的.在JDK中Timer类主要负责计划任务的功能,也就是在指定 ...

  3. Java实现完美洗牌算法

    1 问题描述 有一个长度为2n的数组{a1,a2,a3,-,an,b1,b2,b3,-,bn},希望排序后变成{a1,b1,a2,b2,a3,b3,-,an,bn},请考虑有没有时间复杂度为O(n)而 ...

  4. java实现第七届蓝桥杯碱基

    碱基 题目描述 生物学家正在对n个物种进行研究. 其中第i个物种的DNA序列为s[i],其中的第j个碱基为s[i][j],碱基一定是A.T.G.C之一. 生物学家想找到这些生物中一部分生物的一些共性, ...

  5. 阿里云高级技术专家空见: CDN的数据化之路

    想要实现优质高速的互联网视频服务,一定离不开高质量的内容分发网络服务,就是我们常说的CDN,在10月13日云栖大会视频多媒体分论坛上,阿里云高级技术专家空见为大家讲解了CDN服务过程中,数据处理.安全 ...

  6. C++拷贝构造函数被调用的时机

    拷贝构造函数调用的几种情况: 当用类的一个对象去初始化该类的另一个对象(或引用)时系统自动调用拷贝构造函数实现拷贝赋值. 若函数的形参为类对象,调用函数时,实参赋值给形参,系统自动调用拷贝构造函数.( ...

  7. webpack+vue+.vue组件模板文件 所需要的包

    {  "name": "webpack-study02",  "version": "1.0.0",  "de ...

  8. mysql基础之-mysql数据控制语言DCL(七)

    0x01 mysql中的权限分布 mysql中的用户信息都存储在系统数据库mysql的user表中 查询语句:select host,user,password from mysql.user; 创建 ...

  9. mysql中drop、delete、truncate的区别简述

    一.区别 1.去什么? truncate table 和 delete只删除数据(记录)不删除表的结构;drop语句将删除表的数据(记录)和表结构依赖的约束(constrain),触发器(trigge ...

  10. EIGRP-13-弥散更新算法-停滞在活动状态

    如果一台路由器参与到了针对某个目的地的弥散计算中(即将相应路由置为活动状态,并发送查询包),它必须首先等待所有邻居都返回响应包,之后它才能执行自已的弥散计算,接着选出新的最优路径,最后开始发送自已的响 ...