css中 出现height为100%失效的原因及解决方案

时间: 2018-02-28阅读: 2491标签: css

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

html,body{
        height: 100%;
        margin: 0;
        padding: 0;
}


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

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

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

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

 

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/452

关闭

css加载会造成阻塞吗?

js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?所以,接下来我就来对css加载对DOM树的解析和渲染做一个测试。为了完成本次测试,先来科普一下,如何利用chrome来设置下载速度

css数值(百分比|负值)

今天为什么要给大家讲解这个东西呢,因为css这部分,尤其是数值这部分感觉非常简单,但是尤其是简单的,却很多人根本就没有弄懂。所以今天就来讲一下css的数值问题吧。大家还是好好听一下吧。

CSS3 2D转换

转换是使元素改变形状、尺寸和位置的一种效果。通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸,可以大致分为2D转换和3D转换。下面介绍的是2D转换的相关知识点。

CSS开发中的10个不要

自我进入这个行业,我就发现开发人员一直在努力征服CSS。理由也很充分,开发人员是用逻辑思考的生物。添加一个DIV元素导致所有代码都不得不往下移一行,而另一个DIV“浮”到左侧,感觉没有任何意义。

CSS中可以和不可以继承的属性

这篇文章整理css中无继承性的属性、继承性的属性、所有元素可以继承的属性、内联元素可以继承的属性、块级元素可以继承的属性

CSS3 clip-path 用法介绍

clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径,或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。

原来 CSS 这样写是会让 App 崩溃的

之前在自己的个人公众号中提到了一篇利用 CSS 的方式进行 XSS 攻击,当时有朋友跟我说,让我去获取那个网站的 cookie,再然后进入那个网站的后台去玩。然而,技术能力实在有限,搞不了这些东西

不为人知的七个CSS知识点

如果你在日常工作中使用CSS,那么你的主要目标很可能集中在使事情看起来是正确的。最终得到的正确结果远比如何实现更重要。这意味着相比正确的语法和视觉效果我们更少关注CSS的实现原理。

为什么 CSS 这么难?

我同 CSS 打交道已经有几年了,每当需要就会用到它。最近我想明白了一个问题,那就是为什么做好 CSS 样式如此之难。如果你一直都在 CSS 中苦苦挣扎,你要知道自己并不是一个人。本文就是要告诉你为什么 CSS 这么难

你知道我们平时在CSS中写的%都是相对于谁吗?

编写CSS的时候,经常会用到百分比赋值(%)实现自适应。像我们最常使用的流式布局设计模式,基本所有的column的宽度都是通过%来取值的。或者比如经常会遇到的元素水平垂直居中问题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!