CSS实现容器占剩余高度 子元素均分高度布局方法

原有代码失效原因 #

• 外层.app容器仅设置min-height: 100%，未启用弹性/网格布局，浏览器无法计算剩余高度的分配规则
• .content容器仅声明纵向flex布局，既没有配置占满父容器剩余高度的属性，内部子元素也未设置均分高度的规则

Flex 实现方案 #

无需修改HTML结构，仅调整styles.css代码即可：

body {
  font-family: sans-serif;
  margin: 0;
}

html,
body {
  height: 100%;
}

.app {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 1rem;
}

header {
  padding: 0 1rem;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content > * {
  flex: 1;
  padding: 1rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

Grid 实现方案 #

如果偏好Grid布局，可以替换对应样式块，效果完全一致：

.app {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.content {
  display: grid;
  grid-auto-rows: 1fr;
}

效果说明 #

• .content会自动占满父容器内导航、头部区域之外的全部剩余高度，块级元素默认撑满父容器宽度，无需额外设置宽度属性
• .content内的直接子元素会自动均分容器高度：2个子元素各占1/2、3个子元素各占1/3，无需手动配置高度比例

内容的提问来源于stack exchange，提问作者J. Hesters