为什么设置 height 100% 不起作用

按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个div元素的CSS是height: 100px;，那它应该在页面的竖向空间里占满100px的高度。

请看以下代码：

<html><body><div style="height: 100%;"><p>想让这个div高度为 100% 。</p></div></body>
</html>

现在给这个div的高度为100%，可是他为什么没有生效呢？

想要知道为什么，先拓展以下知识点

W3C的规范，百分比的高度在设定时需要根据这个元素的父元素容器的高度。所以，如果你把一个div的高度设定为height: 50%;，而它的父元素的高度是100px，那么，这个div的高度应该是50px。

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

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

因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。换句话说，父元素的高度只是一个缺省值：height: auto;。

为了上上面代码生效，必须改成以下这样：

<html style="height: 100%;"><body style="height: 100%;"><div style="height: 100%;"><p>这样这个div的高度就会100%了</p></div></body>
</html>

为什么设置 height 100% 不起作用相关推荐

vue中设置height:100%无效的问题及解决方法
在vue.js中写新的components的时候,如果在新页面中的模板中设置height:100%的时候一直无效,在App.vue中:<template><div id=" ...
[css] body{height:100%}和html,body{height:100%}有什么区别？为什么html要设置height:100%呢，html不就是整个窗口吗？
[css] body{height:100%}和html,body{height:100%}有什么区别?为什么html要设置height:100%呢,html不就是整个窗口吗? html是body的父 ...
微信小程序设置width 100%有用，但height 100%不起作用的解决办法
问题原因: %设定宽高是根据父级宽高来定的,假设页面并没有缺省的高度值,当你让一个元素的高度设定为百分比高度时,无法根据获取父元素的高度,也就无法计算自己的高度. 解决办法: 给页面设定一个绝对的高度 ...
为啥你的height:100%不起作用？
1.百分比宽高的设定对于w3c中对width 与height的解释,可以明确%设定宽高是根据父级宽高来定的: 2.width:100% 随意写一段代码,设置一个背景颜色以便查看效果可以看到 ...
css设置height无效,CSS中设置height:100%无效的解决方案
li 前面的缩进怎么去除? 异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 设置margin和padding为0或者为比较小的值就 ...
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%让页面容器元素铺满窗口
div 容器height:100% 我们想要让页面中的一个div容器能够实现自适应浏览器窗口的高度,这时候我们一般不希望牵扯js,简单的通过css的height:100%来实现高度的自适应. 这样是不 ...
CSS子元素撑满父元素（height: 100%无效）
原因分析明确一点:子元素设置height: 100%需要父元素有确定的高度: 如果父元素高度是被子元素②撑起来的,此时我们想让子元素①撑满高度,height: 100%无效. 解决办法父元素: p ...

为什么设置 height 100% 不起作用

为什么设置 height 100% 不起作用相关推荐

最新文章

热门文章