css height:100%和height:auto的区别

最新推荐文章于 2023-06-28 14:11:11 发布
原创 最新推荐文章于 2023-06-28 14:11:11 发布 · 517 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细解释了CSS中height:auto与height:100%的区别。前者根据内容自动调整高度，后者依据最近有定义高度的父元素来设定。此外，文章还提到了宽度属性width的应用原理。

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

css height:100%和height:auto的区别

height:auto，是指根据块内内容自动调节高度。
height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。
height默认值就是auto

ps width也是同理


查看原文：http://newmiracle.cn/?p=1735
为什么 height:100%会无效？
liuhao9999的博客
03-23 757
对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值。 原因是如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto，因为解释成了auto， 所以无法参与计算。 使用绝对定位的元素会有计算值，即使祖先元素的height计算为auto也是如此。 ...
精通css之路 --- width:auto 里的 width:100%
kiss_again的博客
09-20 501
width:auto 里的 width:100% 首先我知道，对于的width:auto： inline-block : 被内容撑开 block : 充满父盒子 后来在 width:auto 和 width:100% 一起使用时，我发现了一些有趣的问题，我随着我的发现把它们记录了下来 <div class="out"> <div></div> <span> 这是一段话这是一段话这是一段话 </span> </div
关于高度
weixin_33674976的博客
07-22 180
height:auto，是指根据块内内容自动调节高度。height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。 转载于:https://www.cnblogs.com/wangbei2016/p/5694904.html...
min-height:100px; height:auto;的用法
Jruott的专栏
07-24 2447
总结：min-height:100px; height:auto;的用法 1、IE6有个BUG，就是如果指定了一个盒子的高度，但里面内容又溢出了，那这个盒子的高度则会失去作用，盒子的高度会随着内容的增长而自动增长   （即内容不会溢出，而是把盒子撑大） 2、 IE7.0，8.0，FF如果在高度的方向内容溢出，它下面的弟弟元素会和上面的内容交叠在一起 （当内容少于height:100px;的
CSS之height: 100%和height: auto的区别
seimeii的博客
09-30 527
CSS之height: 100%和height: auto的区别
CSS | width、height中auto与100%与固定值有什么不同
热门推荐
Errorong的博客
07-08 2万+
由于多次在设置width及height处出错导致不显示，总结了一篇固定值与auto、100%的差别，前面举例对比部分有基础的同学可以略过直接看总结。总结：（1）width、height使用固定值是一定会显示的，但是除非是小型项目或是特殊情况，最好不要使用固定值。不利于响应式开发，当从移动端看页面就会非常不美观。（2）不设置width、height时默认为auto，当position不同时显示效果不...
vue中设置height:100%无效的问题及解决方法
10-18
浏览器并不会自动给这些元素添加固定高度，因此，当我们在CSS中给#app设置height:100%时，其父元素html和body的高度实际上是0px，所以#app元素的高度也就随之为0px。此时，高度设置的100%是相对于其高度为0的父元素...
深入理解CSS的height:100%和height:inherit之间的使用区别
09-25
在CSS布局中，`height: 100%` 和 `height: inherit` 是两个非常常见的属性值，它们分别用于设置元素的高度。虽然在许多情况下它们的效果相似，但存在一些关键的区别，尤其是在特定的布局环境中。 首先，`height: ...
vue设置height:100%无效
子时不睡的博客
07-30 3240
使用vue来创建一个地图样式的组件，在地图组件页面设置了样式，却没有生效 <style> #viewDiv { width: 100%; height: 100%; } </style> 只有上面一部分 height设置成100%，组件中的div的高度应该和父元素也就是App.vue中的div一样，而App.vue中的div父结点是body标签，body标签上一级是html标签，body和html的高度默认是auto，浏览器也不会自动加高度，所以b
关于height:100%的简单理解
lihuihui2016的博客
03-06 8228
要想高度百分比起作用，一般来说，要满足两个条件：其一，父标签有高度可寻，就是向上遍历父标签要找到一个定值高度（body，html另外讨论），如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用；其二，标签本身的属性，如果inline属性的标签，如果没有浮动，zoom，或是绝对定位之类属性是不支持百分比高度的，block或inline-block属性可以说是高度百分比...
width: auto和width: 100%、height: auto和height: 100%的区别
weixin_44784401的博客
04-09 2745
标准盒模型和怪异盒模型的区别，width: auto和width: 100%、height: auto和height: 100%的区别
height:100%与height:auto的使用场景
sinat_41747081的博客
10-24 2300
html为： <div class="parent"> <div class="child"> <p class="title">title1</p> <p class="title">title2</p> <p class="title">title3</p> ...
关于Div 高度height: auto 时的计算规则。
Eighteen Z
04-01 3077
自身height>子元素为block且指定了高度>子元素为block时内容的高度>其他其他包括子元素为行内，行内块，自身的line-height(font-size)等。会以line-height，font-size为最小高度，然后谁大取谁。（最后一部分优先级较为麻烦，不便记忆，以实际效果为准。）...
css中auto啥意思,CSS中各种auto值的作用总结
weixin_39849287的博客
08-03 1508
width: autoauto是width的默认值，不需专门设，它保证自身恰好充满父容器的content宽度，无论自身是否有margin/padding/border。很好用。与width: 100%的区别是：width: 100%表示自身的content宽度等于父元素的content的宽度。如果自身没有margin/padding/border，那么自身恰好充满父元素的content，如果有，则...
CSS_高度自动过渡 auto height
小歪博客
06-28 1394
CSS_高度自动过渡 auto height
width和height的默认值auto与%详解(附案例)。
qq_45549336的博客
09-29 2550
结论 width的%：定义基于包含块（父元素）宽度的百分比宽度，会突破父级的限制 width的auto：尽量被父级包裹 height的%：基于包含它的块级对象的百分比高度，会突破父级的限制 height的auto：尽量被父级包裹 案例 一定复制代码跑一边，花几分钟体会一下尽量被父级包裹与突破父级的限制 width案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-
css的auto值是什么意思
androidioskl的博客
03-05 2571
auto值的介绍 auto表表示自适应，由浏览器去自动计算auto值，auto在不同的环境下表示不同的意思。 在文档流模型中的auto值: 块级元素的auto: 可用设置auto值的属性: width、height、margin。 当以上这些属性设置水平方向上的值为auto时，表示计算包含块的剩余可用空间，它会自动计算计算包含块的剩余空间。 当以上这些属性设置垂直方向上的值为auto时，height会自适应内容，margin上下会计算为0，原因是块级元素在垂直方向上并不要求占满一行，原理可以看我这篇博客:
CSS 高度(css height)
bytxl的专栏
11-17 2829
一、height高度语法   -   TOP 1、高度基本语法 Height:auto 设置高度自动 （通常默认高度是auto自动，自适用内容而增高，通常如果想高度自适应不用设置） Height:20px 设置高度为固定数值 2、CSS高度用法结构 #divcss5{height:50px} 设置了divcss5对象盒子高度为50px（像素） 3、height高
<div v-for="(items,index) in tabList" style="width: 100%;height: 100%;background-color: #3D74FC;"> <div v-if="tabIndex==index&&index!=0" style="width: 100%;height: 100%;background-color: rgb(211, 149, 67);"> 中<div v-if="tabIndex==index&&index!=0" style="width: 100%;height: 100%;background-color: rgb(211, 149, 67);">为什么没继承父级宽高
最新发布
03-18
例如，父元素的样式被其他CSS规则覆盖，导致width和height的实际值不是预期的100%。但用户提供的代码中，父元素和内层div都直接使用了内联样式，优先级最高，所以除非有其他更具体的选择器或!important规则，否则...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值