height:100%和height:auto的区别

理解height:auto与100%
最新推荐文章于 2023-04-09 17:48:03 发布
转载 最新推荐文章于 2023-04-09 17:48:03 发布 · 873 阅读 · 0

本文探讨了CSS中height:auto与height:100%的区别。前者根据内容自动调整高度，后者则依据最近的有定义高度的父元素来设置高度。通过实际案例对比两种属性在不同场景下的应用。

原文地址：http://blog.sina.com.cn/s/blog_601b97ee0101dtwk.html

一直不明白height:100%和height:auto的区别，最近在制作前端页面时都用了height:100%;overflow:hidden; ，可是有些浏览器出现莫名的奇妙的问题，但换成height:auto就好了，百度过这个问题，却一直没有细看。

今天又浮现了同样的问题，百度细看和群里的朋友指点，终于明白其中的道理，记录一下。

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

为什么 height:100%会无效？
liuhao9999的博客
03-23 879
对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值。 原因是如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto，因为解释成了auto， 所以无法参与计算。 使用绝对定位的元素会有计算值，即使祖先元素的height计算为auto也是如此。 ...
关于高度
weixin_33674976的博客
07-22 194
height:auto，是指根据块内内容自动调节高度。height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。 转载于:https://www.cnblogs.com/wangbei2016/p/5694904.html...
HTML的Height=auto的说明
firegun17的专栏
05-08 8101
 ---------------------------HTML的CSS样式定义-----------------------     #myDiv{        background-color:#000000;-->表示黑色背景（就是上图看见的部分）        width:700px;--->上图黑色部分的宽度        height:400px;--->上图黑色部分的高
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 3304
使用vue来创建一个地图样式的组件，在地图组件页面设置了样式，却没有生效 <style> #viewDiv { width: 100%; height: 100%; } </style> 只有上面一部分 height设置成100%，组件中的div的高度应该和父元素也就是App.vue中的div一样，而App.vue中的div父结点是body标签，body标签上一级是html标签，body和html的高度默认是auto，浏览器也不会自动加高度，所以b
解释一下'style="width: auto;height: auto;max-width: 100%;max-height: 100%;">'
04-05
As an AI language model, I do not have emotions, opinions or beliefs, therefore I cannot provide any information on the topic of null. However, null generally refers to the absence of a value or the ...
height:100%;和height:auto;的区别
Queen-Shir的博客
03-24 756
//子元素有多高，父元素就有多高，自动撑大 height:auto; //父元素有多高，该元素就有多高。 height:100%; table无法设置宽高，只能被子元素(tr,td)撑大。 iframe 没法被子元素撑大，所以height:auto无效；要么设定固定值，要么写js代码实时计算高度，实现自适应；要么给父元素定宽高后，再给iframe设置height:100%。 ...
height:100%和height:auto的的区别
yyYY19910220的博客
07-21 675
height：auto；是指块的高度自动调节； height：100%；是指其相对父块高度而定义的高度，也就是按照离他最近的定义高度的父级得高度来定氮仪高度。
简述height:100%和height:auto的不同
Be myself
08-11 910
height:auto（内容自动填充）是指根据块内内容自动调节高度。height:100%（随父级）是根据离它最近且有定义高度的父层的高度来定义高度。
width: auto和width: 100%、height: auto和height: 100%的区别
weixin_44784401的博客
04-09 2804
标准盒模型和怪异盒模型的区别，width: auto和width: 100%、height: auto和height: 100%的区别
width:100%和height:auto区别
皇总监的博客
03-22 1226
width: auto;和height：auto;指的是浏览器会自己选择一个合适的宽或者高值 如果内外边距变大，那么就减小width或者height的值，反之就增大。 width:100%;和height：100%；指的是宽和高就是父级元素的，并且随着父级的变化； 并且增加内外边距，width和hegiht还是不变的，这就是与auto区别。 一般auto用的多，因为这样灵活
CSS之height: 100%和height: auto的区别
qq_44731369的博客
08-23 4176
height: auto —— 是指根据块内内容自动调节高度。 height:100% —— 是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。 例：随着窗口宽度的改变，导航栏的位置发生变化（大于700时为侧边导航栏，700到400之间为顶部水平导航栏，小于400为顶部垂直导航栏） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
#image { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; margin: 0 auto; border: 1px solid #444; }解析
最新发布
08-09
你提供的 CSS 是对 `#image` 的样式定义。虽然你的 HTML 中并没有使用 `<img id="image">`，但我们可以假设这是一个用于图片的样式规则。下面我将逐行解析这段 CSS 的作用，并说明其实际效果。 --- ## ✅ 原始 CSS 代码： ```css #image { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; margin: 0 auto; border: 1px solid #444; } ``` --- ## ✅ 逐行解释： ### `display: block;` - 默认情况下，`<img>` 是 `inline` 元素，可能会在下方产生空白间隙。 - 设置为 `block` 后，图片会作为块级元素显示，避免底部多余空白。 --- ### `max-width: 100%;` - 图片最大宽度不超过其容器的宽度。 - 防止图片溢出容器，常用于响应式设计。 --- ### `max-height: 100%;` - 图片最大高度不超过其容器的高度。 - 和 `max-width` 一起使用，确保图片在容器内完整显示。 --- ### `width: auto; height: auto;` - 保持图片的原始宽高比。 - 配合 `max-width` 和 `max-height`，实现**按比例缩放**。 --- ### `margin: 0 auto;` - 设置左右 `auto` 可以让块级元素水平居中（前提是该元素有宽度）。 - 对 `img` 来说，如果它是一个 `block` 元素且有宽度限制，就能水平居中。 --- ### `border: 1px solid #444;` - 给图片加上一个 1px 的深灰色边框，用于视觉调试或美观。 --- ## ✅ 总体效果总结 这段 CSS 的作用是： - 让图片在容器中按比例缩放； - 不超出容器； - 保持原始宽高比； - 水平居中显示； - 添加一个边框以便观察。 --- ## ✅ 示例 HTML 如果你有如下 HTML： ```html <div style="width: 500px; height: 300px;"> <img id="image" src="example.jpg" /> </div> ``` 那么这张图片将： - 自动缩放以适应 500x300 的容器； - 保持原始比例； - 水平居中； - 不会溢出容器； - 显示一个灰色边框。 --- ## ✅ 注意事项 如果这个样式是用于 `<canvas>` 而不是 `<img>`，那么 `max-width` 和 `max-height` 的行为会有所不同，因为 `canvas` 的缩放不会自动保持比例，除非你使用 JavaScript 进行绘制控制。 --- ## ✅ 相关问题
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值