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

Question

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

适用于所有主流移动浏览器的解决方案非常棒。

Answer 1

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

固定高度示例

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

视口示例

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;