高度或最小高度：哪个最适合 HTML 和 Body 元素布局？

布局中 HTML 和 Body 元素的高度与最小高度

设置布局时，开发人员通常采用以下任一高度：100%或 min-height: 100% 对于 html 和 body 元素。然而，这些方法在某些情况下经常会失败，让设计师想知道哪种方法更可取。

Height: 100%

在 html 和 body 上都使用 height: 100%元素将它们固定到视口高度。此方法有效地应用填充整个浏览器窗口的背景图像。但是，它会阻止正文随着内容的增长而扩展，从而导致视口折叠下方出现不必要的间隙。

最小高度：100%

指定最小高度： html 和 body 元素上的 100% 确保 body 可以扩展到视口高度，从而允许滚动内容。但是，此方法仅在 html 具有明确高度的情况下才有效。

推荐方法

对于填充浏览器窗口的背景图像，推荐的解决方案是：

html {
  height: 100%;
}

body {
  min-height: 100%;
}

这种方法允许 html 确定视口高度和主体根据需要扩展，避免间隙和内容溢出。

其他注意事项

Html 和 body 缺乏固有高度，因此默认分配显式 height: auto 。应用于这些元素的背景图像必须在 html 中显式指定，因为 html 从视口导出其高度。

虽然 min-height: 100% 没有明确的 html 高度可能会导致意外的行为，但请了解 CSS 规范 ( CSS2.1 第 10 节）对这些技术细节进行了详尽的解释。

以上是高度或最小高度：哪个最适合 HTML 和 Body 元素布局？的详细内容。更多信息请关注PHP中文网其他相关文章！