div自动填充剩余的高度

如果您想在 HTML 中的 div 元素自动填充剩余的高度,您可以使用 CSS 的 height 属性和 flexbox 布局。

首先,将容器元素(例如 body 标签)的布局设置为 flexbox:

body { display: flex; flex-direction: column; height: 100vh;

然后,将目标元素(例如 div 元素)的高度设置为自动:

div { flex: 1;

这样,目标元素将会自动填充剩余的高度。

希望这对您有所帮助。

  • 探秘 flex 上下文中神奇的自动 margin
  •