CSS的高度100%为什么不生效呢？

最新推荐文章于 2022-11-24 15:52:50 发布
最新推荐文章于 2022-11-24 15:52:50 发布
阅读量706 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/npz1999/article/details/107016042
版权

body的height:100%

css中的height: 100%是相对于父元素，当我们设置div{height: 100%}，发现div的高度并没有发生变化。
原因是因为div的父元素的高度没有设置，所以：

html,body {
    height: 100%;
}

html的高度等于浏览器的高度，这样div的高度就等于了父元素的高度了。

元素的height:100%

需要父元素指定具体高度值，如height: 100px，子元素的height: 100%才会生效

「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS百分比定义高度为什么没有效果
12-09
当我们给块级元素设置响应式高度的时候，例如给div设置height=50%，往往没能看到效果。 原因是百分比的大小是相对其父级元素宽高的大小，如最外层元素设置的百分比是对应屏幕而言的。 需要了解的是对于宽度来说，...
小程序scroll-view与css左右滑动超出部分背景颜色不显示的解决方法
01-04
小程序scroll-view与css左右滑动超出部分背景颜色不显示的解决方法
DIV的CSS height:100%无效的解决办法
xbczy的专栏
06-23 5272
在设置DIV高度的时候，会用到一个height:100%的大小，来让div撑满浏览器高度。但是我们会发现，直接在div中写上“style:"height:100%;"”是无效的。 那么如何才能让div的css height:100%生效呢？解决办法很简单，同时也能适配多个浏览器。 方法就是在css当中增加上： html, body{ margin:0; height:100%; } 这样，
设置组件高度100%不生效问题
qq_20411471的博客
07-10 1346
有时我们设置组件的高度为100%，结果设置之后发现高度并不是100%,比如下图，我们可以看到在此处container设置了100%的高度，但是并没有生效。 这是因为class="container"的这个组件虽然height设置成100%的高度，但是100%，是相对于父元素的100%，因此我们需要再设置page元素的height为100%，才能保证container设置的100%height生效，如下图： ...
CSS 高度设置100%无效的原因
Crawlychen的博客
07-19 2127
原因：当子元素高度设置为100%时，是根据父元素的高度来进行计算的，因为父元素的高度未设置，默认为auto，所以子元素的高度便无法得到确定。 参考：CSS如何让height：100%起作用 https://www.cnblogs.com/qianxunpu/p/7991429.html ...
高度设置为100%无效的解决办法
qq_15007601的博客
09-07 1879
  In specific, all percentage-based sizes must inherit from parent block elements, and if any of those ancestors fail to specify a size, they are assumed to be sized at 0 x 0 pixels 具体地讲，所有基于本分比的尺寸...
【css】div盒子height:100%高度无效解决办法
hzxOnlineOk的博客
11-24 5151
需要分成2种情况来看待，flex情况下，非flex情况下
css：为什么我设置宽高百分比不生效
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
11-16 4674
很多新手朋友写 css 的时候，有时发现设置宽高百分比有用，有时候又没用，到底怎么回事呢？
css span宽度设置生效.docx
11-24
CSS span 宽度设置生效方法总结 在 HTML 文档中，span 标签是常用的内联元素，用于标记文本或内联内容。然而，当我们需要设置 span 的宽度时，发现 span 标签的宽度设置并不能生效。这是因为 span 标签不是块级元素...
css3 border-radius属性详解
12-09
有什么用？ 这个radius属性，可不只是设置圆角，还可以用来画一些简单的图形。 画个圆形 #demo1 { width:100px; height:100px; background:red; border-radius: 50%; } 上述50%就是说设置各边圆角都为50%。 ...
纯css实现table滚动条(纯css实现div滚动条)
04-23
纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.
css踩坑之高度100%
原鑫的个人博客
10-25 3118
在css中，height：100%是相对于父级的，如果父级没用100%，子集加上也没用。 html, body { width: 100%; height: 100%; } #app { width: 100%; height: 100%; /* background: red; */ } 上述代码...
如何css无法调整高度问题（height:100%不起作用）
mzjmmc的博客
09-11 1107
参考文章：https://segmentfault.com/a/1190000012707337 html,body{   /*解决height100%无法生效问题  */   height: 100%;   margin:0;   padding: 0;  }
css里height:100%不起作用
liona_koukou的博客
09-26 1346
做网页自适应的时候常用到height:100%想让div高度铺满屏幕，但发现常常不起作用，其实是要对html,body{height:100%;}设置，加上之后div的height:100%就能成功占屏幕的全部了。   html,body{ width:100%; height:100%; }      ...
HTML给div设置百分比高度无效的解决方式
热门推荐
Royal
06-22 3万+
给div设置height:100%;<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>div高度</title> <style> *{margin:0;padding:0} .nav{ width:200px;
table和div设置height:100%无效的完美解决方法
weixin_30652879的博客
03-18 1047
刚接触网页排版的新手，常出现这种情况：设置table和div的高height="100%"无效，使用CSS来设置height:"100%"也无效，为什么会这样呢？解决height:100%无效，table和div的解决方法并不相同。 首先说一下table，他比较容易解决，当我们使用Dreamweaver来制作网页，新建一张网页，通常在代码头部会有类似以下的代码：<!DOCTYPE ht...
页面设置body高度height:100%不生效解决办法
Think____的博客
08-06 1万+
直接body{ height: 100%; }不生效的话，那就在前面加个html吧，如下： html,body { height: 100% } 如果想要知道原理的可以参阅下面这篇文章，写得很好 转自：https://blog.csdn.net/javaloveiphone/article/details/51098972...
CSS中设置height:100%无效的解决方案
weixin_33672400的博客
07-04 723
在网页设计中有时会设置某个DIV或者TABLE的高度自适应，即元素的高度充满父元素的高度。一般使用设置CSS height:100%来实现。但是当元素层级嵌套比较深的时候，设置该属性并不能得到应有的效果。其实问题在于该元素的父级元素，当父级元素没有设置高度时，子元素的该属性并不会出现效果。所以，当要设置height:100%这个属性时，该元素的所有嵌套的父元素都必须设置高度，或者height:1...
有关height:100%不生效的解决办法
crush_zhao的博客
01-30 2951
body{height:100%}不生效 需要对html{height:100%} 一个没有设置宽度和高度的div标签，浏览器会为其分配可使用的最大宽度（比如全屏宽度），但是不负责分配高度，块级元素的高度是由子元素堆砌成起来的。 元素高度百分比需要向上遍历父标签要找到一个定值高度才能起作用，如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用，此时的情况是父元素高度...
给元素html和body高度100%为什么不生效
最新发布
05-28
如果给元素 html 和 body 都设置高度为 100%，但是仍然不生效，可能是因为其他 CSS 样式的影响。 可能出现的情况包括： 1. 其他 CSS 样式将 html 或 body 的高度设置为了固定值，覆盖了你的设置。 2. 其他 CSS ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值