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

Question

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

在所有主要的移动浏览器上都可以使用的解决方案会很棒。

Answer 1

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

固定高度示例

 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>