height 100% 无效,height:100%是什么意思
为什么你的身高：100%不行？
这些知识并不冷门，但用起来可能还是有点力不从心。行不通的时候，你可以通过搜索找到答案，但是你真的懂吗？为什么要设置全屏元素时高度不用%控制？
1.百分比宽高的设定
根据w3c中的宽度和高度属性，很明显%设置的宽度和高度是基于父元素的宽度和高度：
https://www.w3school.com.cn/cssref/pr_dim_width.asp
https://www.w3school.com.cn/cssref/pr_dim_height.asp
2.width:100%;
我们写这样一个代码，随机设置一个背景色，方便观察元素。注意下面的代码，记得加！DOCTYPE html，不然就不一样了。
body div style= width:100%；身高：100%；背景色：蓝紫色；宽度：100%；身高：100%；/div/body//100%宽，我们现在看到的高度属于font-size，而不是100%；
body div style= width:100%；高度：200px背景色：蓝紫色；宽度：100%；高度：200px/div/body//效果如下
很容易看出100%的宽度基本是宽的，但是这里的高度不能设置为%(元素会消失不可见)。为什么？
3.浏览器是如何计算高度和宽度的
Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果您没有为宽度设置任何默认值，浏览器将自动平铺页面内容以填充整个水平宽度。也就是说，如果我们不设置宽度，它会自动填充整个横向宽度，如下所示：
div style= height:100%；身高：100%；/div
但是高度的计算方式完全不同。其实浏览器根本不计算内容的高度，除非内容超出窗口范围(导致滚动条出现)。或者你可以设置整个页面的绝对高度。否则浏览器就干脆让内容堆下来，页面的高度根本不需要考虑。
因为页面没有默认的高度值，所以当您将元素的高度设置为百分比高度时，您无法获得父元素的高度，因此您无法计算自己的高度。
即父元素的高度只是一个默认值：height:auto；当我们设置高度：100%时，我们要求浏览器根据这样一个默认值来计算百分比高度，我们只能得到未定义的结果。即空值，浏览器不会对此值做出反应。
不同浏览器对宽度和高度的分辨率不同，可以自己搜索。
4.如何解决
现在您知道%是根据父元素计算的高度。为了使它有效，我们需要设置父元素的高度；
需要注意的是，body中元素的父元素不仅是body，还有html。
所以我们必须同时设定两者的高度，不可能只设定其中一个：
html，body { height:100%；边距：0；填充：0；}
5.关于line-height居中的一点误解？
!DOCTYPE html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，initial-scale=1.0 meta http-equiv= X-UA-Compatible content= ie=edge title document/title style html，body { height:100%；边距：0；填充：0；} div { color:白色；文本对齐：居中；字体大小：30px行高：100%；背景色：蓝紫色；}/style/床头！-div style= width:100%；身高：100%；宽度：100%；身高：100%；/div-div style= height:100%；身高：100%；/div！-div style= width:100%；高度：200px宽度：100%；高度：200px/div-/body/html所有代码如上。您可以看到行高设置为100%，没有居中。为什么会这样，因为此时的%是相对于字号而言的？所以没有绝对高度是不可能直接作用于元素的。
行高属性描述：https://www.w3school.com.cn/cssref/pr_dim_line-height.asp
这时候如果想居中，可以做以下几个：做一个div嵌套，一个负责高度，一个负责居中。虽然感觉不是这样的，但是中心还是很有效果的~
！DOCTYPE html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，initial-scale=1.0 meta http-equiv= X-UA-Compatible content= ie=edge 标题文档/标题样式html，body { height:100%；边距：0;填充：0;} .div1 {背景色：蓝紫色；位置：相对；} .div 2 { font-size:30px；颜色：白色；文本对齐：居中；宽度：400像素位置：绝对；左：50%;top:50%；transform:平移x(-50%)平移y(-50%)；}/style/床头！-div style= width:100%；身高：100%;宽度：100%;身高：100%;/div-div style= height:100%； div1 div class=div2 高度：100%;/div /div！-div style= width:100%；高度：200像素宽度：100%;高度：200px/div - /body/html
6.源码
https://github。com/贾欣怡/ife-study/blob/master/height/身高。超文本标记语言
搬运链接：
（.)前端小知识-为什么你写的高度：100%不起作用？_知其所以然——前端-分段故障思否
到此这篇关于为什么你写的高度：100%不起作用的文章就介绍到这了，更多相关高度：100%不起作用内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。