IE不支持 内div height：100%解决方案

最新推荐文章于 2024-03-04 17:23:21 发布
最新推荐文章于 2024-03-04 17:23:21 发布
阅读量284 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mememama111/article/details/84475072
本文将详细解释在FF浏览器中body元素设置为100%高度时遇到的问题，并提供一种在HTML中同时设置body高度的方法来确保布局在所有浏览器中的一致性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

要在body上加入 height:100%

但是body的height:100% 在FF中不受支持，要在html中也加上height:100%

mememama111
关注
IE6 CSS高度height:100% 计算失效/无效
09-25
总之，`height: 100%` 在IE6中的失效是由于浏览器的局限性和不完整的CSS实现导致的。理解这个限制并采用适当的解决策略，可以有效地避免此类问题，确保在各种浏览器环境中提供一致的用户体验。在开发过程中，利用...
IE6下不能设置height:1px的元素是什么原因如何解决
09-25
需要注意的是，这些解决办法通常是在缺乏更好的替代方案的情况下采用的权宜之计，实际上在进行网页开发时，推荐的做法是避免使用IE6浏览器，因为这样既可以在设计上拥有更大的自由度，又可以避免很多类似兼容性问题...
height高度100%在ie中的问题
闷骚的男
12-28 2411
高度100%在火狐中没问题但在ie中不起作用解决方法：高度100%不继承父节点属性 但继承body的属性 所以把body 设置为height:100%后即可
如何让 height:100%; 起作用
Les étoiles的专栏
12-04 2258
当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。你知道为什么height:100%不起作用吗？ 按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个div元素的CSS是height: 100px;，那它应该在页面的竖向空间
IE6 CSS高度height:100% 无效解决方法总结
weixin_34310127的博客
02-05 173
上面红色部分为 height:100%; 自动拉伸到与父元素一样的高度。在IE7 8 FF 等浏览器中通过position:absolute;可以使height:100%;正常显示，IE6下无效。方法一： 使用CSS嵌入JS来实现。 _height:expression(document.getElementById('div2').offsetHeight+"p...
css子元素height:100%无效问题。
a5252145的博客
07-30 1898
css子元素height:100%无效问题。 1. 高度自适应前提是，子元素所有的父级元素全部height:100%. 2. html:{ height:100% } body:{ height:100% }
在IE6下用css设置div的高度为100%时失效的问题!
hilllog的专栏
11-21 1480
 例如在css中写上        .black_overlay{            display: none;            position: absolute;            top: 0%;            left: 0%;            width: 100%;            height: 100%;    
.game-guides .post-list .post-fig { min-width: 270px; aspect-ratio: 1.91 / 1; margin-right: 30px; } .game-guides .post-list .post-fig img { width: 100%; height: 100%; object-fit: cover; }
07-22
因此，最终解决方案是使用上面的CSS代码，设置容器的宽高，然后设置内部图片的宽高为100%并加上`object-fit: cover`。 如果用户希望图片不被裁剪，而是完整显示（但这样可能会改变容器的宽高比，因为图片的宽高比...
body { padding: 0; margin: 0 } #unity-container { position: absolute } #unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) } #unity-container.unity-mobile { position: fixed; width: 100%; height: 100% } #unity-canvas { background: {{{ BACKGROUND_COLOR }}} } .unity-mobile #unity-canvas { width: 100%; height: 100% } #unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none } #unity-logo { width: 154px; height: 130px; background: url('webgl-logo.png') no-repeat center } #unity-progress-bar-empty { width: 1000px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('frame_gaojing_nomal@2x.png') no-repeat center } #unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center } #unity-footer { position: relative } .unity-mobile #unity-footer { display: none } #unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px } #unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center } #unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }我需要#unity-logo { width: 154px; height: 130px; background: url('webgl-logo.png') no-repeat center }这个logo在应用中间 然后#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }这个进度会从0到100加载 不是一整条过去显示
08-08
根据需求，我们需要将#unity-logo放置在应用中间，并且进度条是从0逐渐增加到100%的动画效果。 首先，我们注意到#unity-loading-bar的定位是绝对定位，并且通过left和top设置为50%再通过transform居中。而#unity-...
<style> .img-container { display: grid; grid-template-columns: repeat(2, 1fr); /* 创建两列 */ gap: 12px; /* 图片间距 */ overflow-x: hidden; /* 禁止左右滑动 */ width: 100%; } .img-item { width: 100%; aspect-ratio: 3/4; /* 建议设置宽高比保持统一 */ overflow: hidden; } .img-item img { width: 100%; height: 100%; object-fit: cover; /* 保持图片比例 */ transition: transform 0.3s ease; } </style> <div class="img-container"> <div class="img-item"><img src="image1.jpg" alt="示例"></div> <div class="img-item"><img src="image2.jpg" alt="示例"></div> <!-- 更多图片项... --> </div> 为什么只有一列显示
最新发布
08-08
可能的原因及解决方案： 1. 检查容器是否设置了正确的Grid布局属性。 2. 确保每个图片项（.img-item）被正确放置到网格中。注意，在Grid布局中，每个子项默认占据一个网格单元格，因此我们不需要为每个图片项设置...
设置height:100%;无效果的解决方法
maid_04的博客
05-15 2754
用css设置样式时，width:100%会自动填满整个屏幕的宽度，所以觉得设置height:100%也会有同样的效果，但确实是被打脸了，设置height:100%时，只会自动适应子元素的高度，想要填充整个屏幕的高度，只给该元素设置height:100%是无法实现的。 在正常的HTML中，要使该元素自动填充整个屏幕的高度，必须给他的所有父级元素也设置height：100% &lt;h...
关于 iframe 在ie11 height:100% 无效的巨坑
weixin_30632899的博客
12-07 349
好的，今天公司分配了个解决ie中的bug的任务，其中，有一个就是iframe 的高度 100% 没有生效的问题； 一开始，由于我真的没有怎么去了解过iframe这个货，所以，网上各种搜索一大堆关于这货的资料，到最后，发现并没有卵用，没有找到问题的重点； 甚至搜索到请求头要设置X-Frame-Options这个参数的点上去了，顺带说说，X-Frame-Options这个参数： 有时候为了防止网...
google earth IE8下面height：100%；不起作用
v5browser
10-26 171
在项目中遇见了改问题 earthBox height 100%不起作用。 解决办法：很简单 将html,body,.earthBox{height:100%;},父节点的高都设为100%；
ie height
weixin_34132768的博客
06-28 351
苦恼我许久了，为啥在IE中设置div的height属性无效呢。。。 在网上查了，常用解决是设置line-height或者设置overflow:hidden，不过我这个div用来定位的，一是里面没文字，二是overflow:hidden后超出的部分都不显示了。不是我要的效果，在chrome下一切正常，在IE下就是不行。 不过偶然发现之前写了一个在IE中正常的，于是做了下对比，最终发现原来端倪在h...
IE10没有设置div宽度，但是宽度100%，且无法居中
qq_43233280的博客
08-24 338
做了一个分页器，项目需求要兼容到ie10，放到IE浏览器测试之后。最外层div没有设置宽度的情况下，有100%的宽度。但是需要居中显示。 最后发现在这个div中添加text-align: center，可以解决居中问题。 猜测原因： 由于ie10无法使用flex，所以内部的div之类的子元素都使用了display: inline-block进行一行显示。IE会默认将inline-block的元素不管宽度有没有达到1行的宽度，都按照1行的宽度进行计算，导致最外层div被撑开。 ...
Table td中 div 不能高度100%还是没有铺满的原因
qq_34720531的博客
03-04 1182
Table td中 div 不能100%的原因
ie6 兼容height:100% , 和position:fiex
kongjiea笔记
07-02 2187
_height:expression(document.body.offsetHeight+"px")
解决textarea在ie浏览器下宽度溢出的问题
无止境学的博客
12-02 439
解决textarea在ie浏览器下宽度溢出的问题的方法是： 给textarea元素定义宽度，并且padding,margin,border都是0,而不是使用 textarea 元素的 rows和cols属性。
html表格高度100px,使div达到TD的100％高度（IE问题）(Make div 100% height of TD (IE issue))...
weixin_34262786的博客
06-21 605
height)如果你给你的TD的高度为1px，那么子div将有一个高度的父代来计算它的％。 因为你的内容会大于1px，所以td会自动增长。 Kinda一个垃圾骇客，但我敢打赌它会工作。 If you give your TD a height of 1px, then the child div would have a heighted parent to calculate it's % fr...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值