答案 0 :(得分: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>
&#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;