html，body，其他标签的百分比高度问题

最新推荐文章于 2023-11-29 12:24:12 发布
最新推荐文章于 2023-11-29 12:24:12 发布
阅读量592 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Krismile_/article/details/103770452
版权

百分比宽度是相对于父元素而言的，只有当父元素有明确的高度时，子元素的百分比才会生效。

例如：在样式中设置了div的高度，结果页面中还是会显示div高度为0 

<style>
       .cd{
           height: 100%;
       }
</style>

<body>
    <div class="cd">
        
    </div>
</body>
</html>

结果图： 

即使给body也设置了100%的高度依旧不可以，因为body的高度是相对于浏览器的，只有将浏览器和body的高度，只有将其都设置为100%之后标签的相对高度才可以生效。

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

 同样，其它标签在使用百分比宽度的时候需要注意父标签需要有确定的宽度值或html，body宽度为100%。

 

Krismile_
关注
专栏目录
html和body高度不一致,即使html和body都是容器流体的高度不是100％
weixin_28689729的博客
06-19 756
我有以下布局(我正在使用Meteor)：{{> header}}{{> UI.contentBlock}}{{> footer}}{{#headerFooter}}{{#each stories}}...{{/each}}{{/headerFooter}}和这个(相关的)css备份：html {height: 100%;}body {min-height: 100%}.fill-...
html 和 body 标签的高度（如何让div占满全屏）
qq_40890601的博客
05-20 1万+
问题描述： 想让下面的header元素高度为100%，奈何设置了height： 100%；之后没作用。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title></title> <link href=
html高度百分比分配
weixin_33850015的博客
12-30 375
大家在做div随着屏幕改变的时候，把div高度设置100%，发现没有效果，之后又把body的高度设置成100%，还是没有效果。其实只需要把html的高度也设置成100%就可以了。 转载于:https://www.cnblogs.com/xue2b/p/3497508.html...
HTML学习之给div高度设置百分比不生效的问题（二）
热门推荐
liuying1802028915的博客
10-13 2万+
这几天在学习HTML的知识，今天想做一个极为简单的页面，就是分为头部，内容和底部，本来用三个div即可，可是给div高度设置百分比时发现不生效，具体页面乳腺，非常简单。 下面是html部分： 11111111 2222222222 33333333 就三个div,div是块级元素，宽度会默认撑开，如果不设置高度时，默认内容会撑开高度
html 子div是什么意思,html – 为什么子div超出了它们的父div？
weixin_31655833的博客
06-11 275
我觉得这很愚蠢,但这是一个非常简单的问题,不明白如何解决.在下面的代码中,为什么容器,主要和辅助div扩展到标题之外？我知道它是因为我已经分配给容器的填充而发生的,但我已经为html元素分配了最大宽度. header元素遵循最大宽度,但容器及其子div不是.我在这里看过类似的问题,但没有看到任何我认为与我的特殊情况相关的问题.这里发生了什么？谢谢.的test.htmlTesthtml {max-w...
b标签设置margin值没用_【震惊】paddingtop的百分比值参考对象竟是父级元素的宽度...
weixin_39782500的博客
12-25 135
引言书写页面样式与布局是前端工程师Coding 中必不可少的一项工作，在定义页面元素的样式时，padding 属性也是经常被使用到的。padding 属性用于设置元素的内边距，其值可以是length、inherit，当然也可以是百分比。今天为什么会聊到padding-top设置百分比时的参考对象这个话题呢，这还要从一道不那么正经的面试题说起~一道不那么正经的css布局面试题在对面，一本正...
body中的基本标签
xiaoting_0926的博客
07-29 3382
body中的基本标签： 文本标签：普通文本、标题标签、横线标签、段落标签、实体字符、加粗、倾斜、下划线、预编译标签、换行、中划线、字体标签； 多媒体标签：图片、音频、视频。 超链接标签；表格标签；div标签。 ......
CSS13_由html{height: 100%} 引发的CSS百分比宽高度的思考
linxwx的博客
11-20 1328
html {height: 100%}，其高度是浏览器给的
HTML中的常用标签
09-18
3. **其他文本格式化标签**： - **小字体**：`<small>`使文本变得更小。 - **大字体**：`<big>`使文本变得更大。 - **粗体字**：`<b>`使文本变粗。 - **斜体字**：`<i>`使文本倾斜。 - **打字机字体**：`<tt>`...
HTML表格标记教程(3):宽度和高度属性WIDTH、HEIGHT
12-01
本教程将深入讲解如何使用HTML中的`<TABLE>`标签的`WIDTH`和`HEIGHT`属性来设置表格的宽度和高度。 首先，我们要了解默认情况下，HTML表格会根据其内容自适应地调整宽度和高度。然而，为了更好地控制表格的布局和...
父元素高度为auto：子元素使用top：-50%没有效果的问题
liuboman的博客
03-23 2453
当为父元素设定了height：auto的时候，子元素设置position：relative top：50%没有效果的问题 代码如下： html, body { width:100%; height:100%; } #one { position: abso
html css百分比效果,浅谈CSS中的百分比
weixin_31034309的博客
06-03 400
本文介绍了浅谈CSS中的百分比，分享给大家，具体如下：结论：标准流中的元素，看其属性有没有继承性。对于width和margin-left，它是可以继承的，它会参照父元素或者祖先元素(其实是包含块)；对于height，它没有继承性，父元素或者祖先元素会自适应其所有子元素的高度和(这点是需要注意的)。绝对定位参照的是离它最近的父元素或祖先元素，如果没有父元素或祖先元素，那么参照的是初始包含块(不同的浏...
解决body设置height:100%无效问题
x1037490413的博客
10-31 2496
原因：你让div的height=“100%”，执行网页时，css先执行到，而整个网页中的内容还没有完全载入，是获取不到div外面的等的高度的，所以height="100%"也就不能如愿显示了。加上 body{height:100%} 就轻松解决啦，一开始就让body以100%显示，他的下级div自然就100%的，对于部分浏览器还需html,body{height:100%}height:100%;总结： 最好添加上 html,body{height:100%}
Javascript技巧之：body的height:100%高度，自适应窗口大小
最新发布
quit1111的博客
11-29 1836
有的文章通过设置以下解决此问题，但改变了body的style.height会造成一些不必要的影响和麻烦，比如不必要的滚动条、超出body高度部分的显示问题等。经常需要设计一个全屏的html网页应用，但当你定义body直接子元素的高度为"100%"或通过以下代码设置元素高度时，确遗憾地发现body的高度并非当前窗口的可见高度。那么，有什么办法解决此问题呢？
【转载】html和body
陌笙以笙箫
02-28 587
by zhangxinxu from http://www.zhangxinxu.com转载地址：http://www.zhangxinxu.com/wordpress/?p=259关于html与body的一些表现1.背景色一般情况下，我们css控制的最高节点就是body，例如设置：body{background:#069;}则浏览器界面就是完全的#068的背景色。这里看上去是&lt;body&g...
CSS 设置html,body{height：100%}有什么作用？
weixin_42343966的博客
12-06 1519
html,body { height:100% }是为了让后面的子元素有一个高度依赖。要知道，浏览器会为元素自动设置宽度100%，但是不会自动设置高度，所以高度都是0px。
1. body高度设置为100%却没有起作用
草木红的博客
03-22 3023
当给body添加如下样式时，可以看到页面背景色为粉红色，这时传递的信息好像是因为body占据了整个窗口，才引起的页面背景色为粉红色，但是选取到body元素，可以看到body的高度为0。 body{ background-color:pink; height: 100%; width: 100%; } 原因是： [1] 设置元素高度为百分比时，此元素需要向上遍...
body{width:100%}但窗口出现滚动条&body的子元素height：100%实际高度未填满整个页面
persistence2020的博客
02-15 1461
参考文章：http://t.csdn.cn/lKQvQ。
html,body{ width: 100%;height: 100%;}的解释
qq_26239917的博客
03-13 1万+
按道理，子元素百分比是以父元素为标准，那么问题来了，html有父元素吗？ html{ width: 100%;height: 100%;}拿谁的宽高？ 经过测试，是当前浏览器窗口的大小 看图 &amp;lt;body&amp;gt; &amp;lt;div onclick=&quot;func()&quot;&amp;gt;xxx&amp;lt;/div&amp;gt; &amp;lt;/body&amp;gt
html iframe高度问题
05-24
在 HTML 中，可以使用 iframe 标签来嵌入其他网页或文档。如果你希望设置 iframe 的高度，有以下几种方法： 1. 使用固定高度值 可以使用 iframe 标签的 height 属性来设置固定的高度值，例如： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值