为啥你的height:100%不起作用？

1、百分比宽高的设定

对于w3c中对width 与height的解释，可以明确%设定宽高是根据父级宽高来定的：

2、width：100%

随意写一段代码，设置一个背景颜色以便查看效果

可以看到，宽度的100%很容易实现，但是height:100%就有点难，这是为什么呢？

3、浏览器是如何计算高度与宽度的

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

但是高度的计算方式完全不一样。事实上，浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。

因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。

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

4、解决方法

%是一个相对父元素计算得来的高度，要想使他有效，我们需要设置父元素的height;

要特别注意的一点是，在之中的元素的父元素并不仅仅只是，还包括了。

所以我们要同时设置这两者的height，只设置其中一个是不行的：

这样就噢了。

为啥你的height:100%不起作用？相关推荐

微信小程序设置width 100%有用，但height 100%不起作用的解决办法
问题原因: %设定宽高是根据父级宽高来定的,假设页面并没有缺省的高度值,当你让一个元素的高度设定为百分比高度时,无法根据获取父元素的高度,也就无法计算自己的高度. 解决办法: 给页面设定一个绝对的高度 ...
CSS 如何让 height:100%; 起作用
当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 按常理,当我们用 ...
css如何让height:100%起作用？
原文出处:css如何让height:100%起作用? 当你设置一个元素的高度为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大对数情况下,这样做法没有任何效果,你知道为什么height:100 ...
table height 100%问题
背景:做项目时候,为了省事用table布局,table高度设置成100%,不起作用原因: 有关浏览器工作模式大致可分为三种:Standarded Mode, Almost Standarded Mo ...
关于html,body{height:100%}的理解
有时候你看到别人写css代码的时候会发现:html,body{height:100%} 首先我们先看下w3c 对于height的定义 : 首先这个height:可能为百分数就是相当于包含块的高度,如 ...
[css] css的height:100%和height:inherit之间有什么区别呢？
[css] css的height:100%和height:inherit之间有什么区别呢? 上周在微博上无节操吐槽了下inherit的段子,没想到回声还不少: 微博inherit无节操段子不过inh ...
CSS中height:100%和height:inherit的异同
1. height:100%和height:inherit的异同 1.1 兼容性差异 height:100% IE6+ √ height:inherit IE8+ √ 1.2 大多数情况作用是一样的 ...
vue中设置height:100%无效的问题及解决方法
在vue.js中写新的components的时候,如果在新页面中的模板中设置height:100%的时候一直无效,在App.vue中:<template><div id=" ...
关于height:100%的简单理解
要想高度百分比起作用,一般来说,要满足两个条件:其一,父标签有高度可寻,就是向上遍历父标签要找到一个定值高度(body,html另外讨论),如果中途有个height为auto或是没有设置height属 ...

为啥你的height:100%不起作用？

为啥你的height:100%不起作用？相关推荐

最新文章

热门文章