html - height: auto 如何在 HTML 和 CSS 中工作？

Question

在 CSS 和 HTML 中是如何height: auto工作的？浏览器在计算height设置为的元素高度时会考虑什么auto？

Answer 1

这是从 W3C CSS2 规范复制的摘录

如果它只有 inline-level 子级，则高度是最顶层行框顶部和最底层行框底部之间的距离。

如果它有块级子框，则高度是最顶层块级子框的上边距边缘与最底层块级子框的下边距边缘之间的距离。

绝对定位的子元素被忽略，相对定位的盒子被认为没有偏移。请注意，子框可能是匿名块框。

此外，如果元素有任何浮动后代，其底部边缘边缘低于元素的底部内容边缘，则增加高度以包括这些边缘。仅考虑参与此块格式化上下文的浮点数，例如，绝对定位后代内的浮点数或其他浮点数不考虑。

Answer 2

您可以拆分两种情况：

• div 和其他容器：如果您不指定任何内容，浏览器将使用高度来尝试包含元素内容。（阅读 Mathijs 的答案了解更多详情）
• 图像和其他具有固有尺寸（宽度和高度）的块元素：如果您指定宽度，则“高度：自动”将按比例缩放。

因此，换句话说，除非您需要重置浏览器行为或保持与某些对象的比例，否则它是无用的。