核心原理；

height:100%这个概念是子节点相对于父容器而言；所以要让此属性生效，必要的一点就是：父容器必须具有具体的高度信息；

直接在<body>的子节点（如div中）写height:100%是不会生效的，因为此时<body>的高度是不确定的，默认是auto；

方法一

给从根的父容器到子容器的所有容器都设置好百分比高度信息

比如：

<!DOCTYPE html>
<html lang="zh-cn" style="height:100%;width:100%;overflow:hidden;"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=9;IE=8;chrome=1" /><title>132</title>     </head><body style="height:100%;width:100%;padding:0;margin: 0;"><div style="height:100%;width:100%;background-color:#787878" ></div></body>
</html>

这样从根的Html开始，到字的div结束，全部都具有百分比高度，这样，就都能够获取到高度信息；

方法二

给父容器设置具体的高度信息；

比如直接写死在样式中，或者用javascript来设置；

示例，用js使<body>得到高度，从而使其中的div全屏：

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=9;IE=8;chrome=1" /><title>132</title>        </head><body id="body" style="padding:0;margin: 0;"><div style="height:100%;width:100%;background-color:#787878" ></div></body><script type="text/javascript">var screenHeight=document.documentElement.clientHeight;var screenWidth=document.documentElement.clientWidth;var body=document.getElementById('body');body.style.width=screenWidth+"px";body.style.height=screenHeight+"px";</script>
</html>

方法三

给父容器设置位置信息，让其得到高度信息；

示例，用css使body得到高度，从而使其中的div全屏：

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=9;IE=8;chrome=1" /><title>132</title>        </head><body style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;padding:0;margin: 0;"><div style="height:100%;width:100%;background-color:#787878" ></div></body>
</html>

让高度百分比，height:100% 生效的3种方法相关推荐

CSS: 解决100% 高度失效 height 100% is not working when scrolling down page
原代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
CSS高度自适应 height:100%;
在初次尝试高度自适应时都会遇到这样的问题: 对象的heith:100%; 并不能直接产生实际效果为什么呢? 之所以没有效果,与浏览器的解析方式有一定关系,查看下面代码 <!DOCTYPE ht ...
让height: 100%生效
html: <body><div class="box"></div> </body> css: .box{position: fi ...
014day(h5的发展史，h5的兼容，h5的语法，h5的语义化，h5的常用标记，百分比下字体居中的两种方法，video视频文件，audio音频文件，
一.h5的发展史 1.HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML 工作团队. HTML 5 的 ...
Vue + Element UI——监听DOM元素高度和宽度解决方案整理（八种方法）
问题描述监听DOM元素大小的变化,在前端开发中,算是一个比较常见的需求,比如我们要制作可伸缩的图表的时候,可能需要根据DOM大小的变化,进行动态的更新图表. 解决方案方法一: 监听window变化 ...
解决在onCreate()过程中获取View的width和Height为0的4种方法
此博客为转载,原文请看这位老铁的文章: https://www.cnblogs.com/kissazi2/p/4133927.html 很经常当我们动态创建某些View时,需要通过获取他们的width ...
linux修改windows注册表,妙招：让修改的注册表立即生效的几种方法
建站学院(LieHuo.Net)Windows文档Windows操作系统是全球最广泛,使用者最多的软件,熟悉Windows软件成了电脑操作者必不可少的功课,注册表作为"Windows的神经系 ...
实现1~100求和的三种方法
构思: (1)第一次循环 i = 1, sum = sum + i = 0 + 1 = 1 ,这里儿右边的sum的值为初值0,将1赋给左边的sum后,sum的最新值变成了1 (2)第二次循环 i = ...
iframe height 100% 无效问题解决（转）
最近,利用 MapGuide 技术开发一个 WebGIS 的应用程序,其中用到了 <iframe> 标签:可是当我调试运行的时候,其 width=100% 生效了,但 height=100 ...

让高度百分比，height:100% 生效的3种方法

核心原理；

方法一

方法二

方法三

让高度百分比，height:100% 生效的3种方法相关推荐

最新文章

热门文章