chrome div 百分比 高度 宽度 无效

最新推荐文章于 2021-08-30 16:44:13 发布
最新推荐文章于 2021-08-30 16:44:13 发布
阅读量390 收藏
点赞数
分类专栏： CSS学习笔记 文章标签： div width height 失效 chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chen106106/article/details/84359500
版权

chrome下div设置百分比高度失效 只能用px解决

.div1 {height:50%}

原因是因为div没有参照对象

给定body的百分比即可

body{height:100%;width:100%}

chen106106
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
关于width: 100%的一些看法
weixin_33754913的博客
05-16 1572
一.position对width 设置为百分比的影响<html> <head> <style type="text/css"> img { width: 50% } body { margin: 8px; } </style&...
js 获取页面高度和宽度兼容 ie firefox chrome等
10-25
主要介绍了js如何获取页面高度和宽度并且兼容ie firefox chrome等主流浏览器
Chrome和Safari浏览器jquery width()， height()获取不到高度的问题
weixin_34319374的博客
12-20 205
遍历一组图片，遍历时需要获取其宽度，效果出来后，IE和Firefox都没有问题，唯独Chrome和Safari会出现获取不到图片宽度的情况。以往基本上是IE不兼容，这下出现Chrome和Safari不兼容了，倒觉得稀奇了，故写出来分享下。 注：代码修改之前，直接用的$(ele).width()来取图片的宽度。涉及代码： $(function(){ ... //此处省略N行 var w ...
记录有关父元素flex: 1，子元素高度设置百分比不生效的问题（谷歌内核的浏览器中）
weixin_46115723的博客
08-30 1101
使用 navigator.userAgent.toLowerCase() 西安获取一下内核信息，查询内核版本是否处于至少处于chrome49以下 参考： https://segmentfault.com/q/1010000020919894 原因分析： 由于在低版本的谷歌内核的浏览器中若父元素是使用flex1自动占满的剩余空间则此时父元素的高度就是缺省即默认的压根就没设置高度，故而导致子元素设置百分比高度的时候因找不到父元素的高度从而导致设置的高度不生效的问题 解决方法： 升级浏览器内核 给父元素一个固
chrome中两层以上Div嵌套时，高度无法自适应的问题
tjmljw的专栏
12-26 280
[code="html"] [/code] 如上所示，div1与div2的高度都不设定时，div1会随着div2的内容而自动调整高度。 [code="html"] [/code] 如果加入了div2_1，这时候div2无法随着div2_1的内容而自动调整高度。 解决办...
JS获取图片高度宽度的方法分享
10-24
主要介绍了JS获取图片高度宽度的方法，开始的时候没能做到兼容chrome，在度娘和众网友的帮助下，最终完成了完美兼容，这里分享给大家，有需要的小伙伴可以参考下。
div ul li 嵌套后如何解决增加多个li后DIV高度自适应问题
09-25
然而，当我们在这样的结构中动态添加多个 `li` 元素时，如何让包含它们的 `div` 自动调整高度以适应所有 `li` 的内容呢？这是一个需要解决的关键问题。本文将探讨一种解决方案，并提供一个示例代码，以确保在添加更...
js固定DIV高度,超出部分自动添加滚动条的简单方法
10-27
在网页设计中，有时我们需要对某个元素，如`<div>`，设置固定的显示高度，并且当内容超过这个高度时，自动添加滚动条以便用户浏览所有信息。本文将详细讲解如何使用JavaScript实现这一功能，主要涉及的知识点包括...
DIV 边距属性在Chrome和IE中的区别深入理解
09-25
在W3C标准盒模型中（如Chrome），`div1`的总宽度会是`960px + 10px + 10px = 980px`，因为`padding`的值被添加到了元素的外部宽度上。而在IE的`border-box`模型中，`div1`的宽度保持为`960px`，因为`padding`已被...
vue element中表格高度设置百分比不兼容低版本浏览器。
weixin_41994948的博客
12-22 1448
在用element中的表格时发现了一个问题，表格高度的设置，官方文档上给例子height的单位设置的是px。但是要让表格自适应，就得设置为相对的单位百分比，刚开始一切ok。但后面测试时候发现设置为百分比有兼容性问题谷歌、ie的低版本识别不了百分比为单位的表格高度。既然css不兼容，那就只能js强制操作一波了。 因为是在vue中就直接用ref获取需要的父级元素了，绑定ref，在方法中获取这个ref拿到父级元素的高度 <div class="resource-right fl" ref="resour
苹果，谷歌浏览器对设置了100%的DIV层宽度不能自适应，部分网页被隐藏，解决办法！...
web开发自学
04-16 1253
最近客户反映网页在Ipad上无法正常访问，研究再三，发现问题 因为外层container宽度为100%, google和apple无法自适应，需要加入以下属性 .container{ width:100%; height:100%; overflow:hidden; zoom:1; background:url(../img/nav_bg.jpg) repeat-x 0px 153px;min...
CSS中width:100%和width:auto的区别
卡卡的笔录
06-07 1万+
&lt;div class="parent"&gt; &lt;div class="child"&gt; &lt;/div&gt; &lt;/div&gt; &lt;style&gt; .parent { width: 100px; background-color: red; } .child { width: 100%; backgro
div宽度设置无效问题解决
zhengxiuchen86的博客
04-11 2059
div宽度设置无效问题解决
css 中div不用设定高度，自动根据内容出现滚动条
热门推荐
汤姆叔叔的小屋
11-26 1万+
css 中div不用设定高度，自动根据内容出现滚动条css部分 .parent{ position:relative; height:100%;//高度根据需求自行设定 } .child{ position:absolute; left:0; top:0; right:0; bottom:0; //left,top,right,bottom都
正确使用“width:100%“
FengChen的进阶之路
05-07 300
如果想要正确使用"width:100%“这一属性，一定要设置"box-sizing:border-box”,否则会造成子元素溢出
div设置了height，但浏览器显示没有高度
cc9200的博客
09-28 1617
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
div高度为0解决
halfsking的博客
10-14 8771
         div高度是根据里面内容自适应撑开的，如果没有内容高度则为0；但div里面有内容高度仍是0，多半是因为元素浮动引起，div里面的元素浮动到其它地方，div里实际上没有内容，因而为0；         用如下为例：  &lt;div&gt; &lt;a&gt; &lt;img&gt;&lt;/img&gt;&lt;/a&gt; &lt;/div&gt;      ...
chrome最小宽度
最新发布
08-09
Chrome的最小宽度取决于您使用的Chrome版本和操作系统。通常情况下，Chrome浏览器的最小宽度是约 320 像素。这意味着，如果您将浏览器宽度调整为小于 320 像素，Chrome可能会自动调整页面的布局以适应较小的屏幕尺寸...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值