CSS之height: 100%和height: auto的区别

最新推荐文章于 2024-09-30 18:35:38 发布
最新推荐文章于 2024-09-30 18:35:38 发布
阅读量445 收藏 1
点赞数
分类专栏： CSS 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seimeii/article/details/127119119
版权

height: auto —— 是指根据块内内容自动调节高度（高度自然撑开）
height:100% —— 是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度

都挺好，刚刚好
关注
专栏目录
CSS样式之width: auto 100%与height:100%
GeXueliu的博客
04-07 934
1.Width（默认情况下为content box的宽度） width:auto 元素content+padding+border+margin=父元素的width <style> .parent { height: 400px; width: 400px; border: 1px solid black; padding: 10px 10px; }
vue设置height:100%无效
子时不睡的博客
07-30 3041
使用vue来创建一个地图样式的组件，在地图组件页面设置了样式，却没有生效 <style> #viewDiv { width: 100%; height: 100%; } </style> 只有上面一部分 height设置成100%，组件中的div的高度应该和父元素也就是App.vue中的div一样，而App.vue中的div父结点是body标签，body标签上一级是html标签，body和html的高度默认是auto，浏览器也不会自动加高度，所以b
关于高度
weixin_33674976的博客
07-22 151
height:auto，是指根据块内内容自动调节高度。height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。 转载于:https://www.cnblogs.com/wangbei2016/p/5694904.html...
【css】transition对height:auto无效的解决办法
最新发布
hzxOnlineOk的博客
09-30 413
CSS3的transition可以作用于大部分属性值为数值之类的属性，包括等。但是将transition应用于时，浏览器会识别height值为0，因此无法直接从height: 0;过渡到;。
CSS的width:100%和width:auto区别
热门推荐
0溺水的鱼O的专栏
12-05 5万+
CSS的width:100%和width:auto区别 一、   问题 前段时间在调整树结构的时候，发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素，导致节点的名称只显示了一半，同时图标和名称换行显示了，但是在IE8和IE9下则显示正常。定位到问题后，最终发现是下面的属性导致的，如下图红色所致，把width的值设置为auto后即可解决问题：     .TreeVi
height:100%;和height:auto;的区别
Queen-Shir的博客
03-24 702
//子元素有多高，父元素就有多高，自动撑大 height:auto; //父元素有多高，该元素就有多高。 height:100%; table无法设置宽高，只能被子元素(tr,td)撑大。 iframe 没法被子元素撑大，所以height:auto无效；要么设定固定值，要么写js代码实时计算高度，实现自适应；要么给父元素定宽高后，再给iframe设置height:100%。 ...
height:100%和height:auto的区别
qq_37555524的博客
09-08 1012
一直不明白height:100%和height:auto的区别，最近在制作前端页面时都用了height:100%;overflow:hidden; ，可是有些浏览器出现莫名的奇妙的问题，但换成heig...
深入理解CSS的height:100%和height:inherit之间的使用区别
09-25
在CSS布局中，`height: 100%` 和 `height: inherit` 是两个非常常见的属性值，它们分别用于设置元素的高度。虽然在许多情况下它们的效果相似，但存在一些关键的区别，尤其是在特定的布局环境中。 首先，`height: ...
vue中设置height:100%无效的问题及解决方法
10-18
浏览器并不会自动给这些元素添加固定高度，因此，当我们在CSS中给#app设置height:100%时，其父元素html和body的高度实际上是0px，所以#app元素的高度也就随之为0px。此时，高度设置的100%是相对于其高度为0的父元素...
div设置width:100%,height:100%，background-color:red但是在页面上不显示
m0_46404398的博客
03-23 1591
最近在学习react，在使用antd的layout组件时，发现直接复制模板代码显示的效果和样例不一样： function App() { return ( <Layout> <Sider>Sider</Sider> <Layout> <Header>Header</Header> <Content
简述height:100%和height:auto的不同
Be myself
08-11 835
height:auto（内容自动填充）是指根据块内内容自动调节高度。height:100%（随父级）是根据离它最近且有定义高度的父层的高度来定义高度。
width: auto和width: 100%、height: auto和height: 100%的区别
weixin_44784401的博客
04-09 2386
标准盒模型和怪异盒模型的区别，width: auto和width: 100%、height: auto和height: 100%的区别
关于css中height高度（100%与auto）使用
Mori_Life的博客
02-19 2410
height：auto 默认情况下，浏览器会计算出实际的高度并填充 height：100% 基于包含它的块级对象的百分比高度 在使用百分比的高度不能填满时，可以设置高度为auto由浏览器自动计算出实际高度（轮播图中调节视频的高度） ...
CSS 高度(css height)
bytxl的专栏
11-17 2664
一、height高度语法   -   TOP 1、高度基本语法 Height:auto 设置高度自动 （通常默认高度是auto自动，自适用内容而增高，通常如果想高度自适应不用设置） Height:20px 设置高度为固定数值 2、CSS高度用法结构 #divcss5{height:50px} 设置了divcss5对象盒子高度为50px（像素） 3、height高
CSS height auto 过渡
Future1994的博客
12-11 711
ps:可能有伙伴会问，呢上面的例子和height:auto有什么关系，需要注意。height的默认值就是auto;
CSS_高度自动过渡 auto height
小歪博客
06-28 1315
CSS_高度自动过渡 auto height
css height:auto 不起作用,CSS Auto-height Div无法正确定位
weixin_42162978的博客
08-04 517
我正在尝试获得一个简单的页面布局，其中导航栏垂直位于用户窗口的右侧，占用的空间不超过20％。左边剩余的80％空间用于内容。我希望整个页面可以调整大小，因此无论浏览器窗口的大小(在合理范围内)，内容都会调整大小到用户的屏幕。一切正常并且调整大小很好，但是navBar存在一个问题。这是一个CSS摘录：body{background-color: #111111;font-family: Roboto;...
谈一谈css中的100%和auto
firewhitwind的博客
09-06 1876
在web前端的编程过程中，利用%数值和auto来进行设置元素的宽度和高度等是很常见的，但是他们的值是怎样计算的呢？
#header .header{ width: 100%; height: 50%; background-image: url("dataView/images/top.png"); background-repeat: repeat; background-position: center; background-size: 100% 100%; margin: 0 auto; text-align: center; line-height: 30px; font-size: 24px; }如何将这段字体和背景图自适应居中同比例放大缩小
06-09
要让字体和背景图自适应居中同比例缩放，可以使用CSS中的background-size和background-position属性以及font-size和line-height属性。具体步骤如下： 1. 将background-size属性设置为cover，使背景图按比例缩放以完全覆盖容器。 2. 将background-position属性设置为center center，使背景图在容器中居中显示。 3. 将font-size和line-height属性设置为相对单位，例如em或rem，使它们能够根据容器大小自适应。 4. 将text-align和line-height属性设置为center，使文字在容器中水平和垂直居中。 例如： ``` #header .header { width: 100%; height: 50%; background-image: url("dataView/images/top.png"); background-repeat: no-repeat; background-position: center center; background-size: cover; margin: 0 auto; text-align: center; line-height: 2em; /* 根据实际情况调整 */ font-size: 3rem; /* 根据实际情况调整 */ } ``` 这样设置后，背景图会按比例缩放以完全覆盖容器，并在容器中居中显示，而文字也会在容器中水平和垂直居中，并且能够根据容器大小自适应。如果需要调整文字大小和行高的比例，可以适当调整font-size和line-height属性的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

都挺好，刚刚好

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值