Css：根据父级调整一个元素的高度，保持其他元素的高度

Question

我想要实现的是，div 1 和 3 应该保持它们的高度，而 div 2 应该调整到容器的高度。

适用于所有主要移动浏览器的解决方案会很棒。

Answer 1

flexbox 是一个很好的选择，您所要做的就是将 flex-grow: 1 设置为需要动态的元素并填充剩余的 space.

固定高度示例

section {
  display: flex;
  flex-direction: column;
  height: 400px;
}

header,
footer {
  min-height: 75px;
}

header {
  background-color: gold;
}

main {
  flex-grow: 1;
  background-color: skyblue;
}

footer {
  background-color: indianred;
}

<section class="container">
  <header>1</header>
  <main>2</main>
  <footer>3</footer>
</section>

视口示例

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header,
footer {
  min-height: 75px;
}

header {
  background-color: gold;
}

main {
  flex-grow: 1;
  background-color: skyblue;
}

footer {
  background-color: indianred;
}

<header>1</header>
<main>2</main>
<footer>3</footer>

Css：根据父级调整一个元素的高度，保持其他元素的高度

Css: adjust height of one element according to parent, keep height of other elements

css

height

固定高度示例

视口示例