CSS flexbox：页眉、主要、页脚布局。主要部分在中间塌陷答案

【问题标题】：CSS flexbox: Header, main, footer layout. Main part collapsing in the middleCSS flexbox：页眉、主要、页脚布局。主要部分在中间塌陷
【发布时间】：2022-04-11 20:12:38
【问题描述】：

我有一个最简单的情况

<!DOCTYPE html>
<html>
<head>
    <title>Whatever</title>
</head>

<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>

所以我希望我的页眉是 .. 15%，我的页脚是 5%，而我的主要部分占据了中间的其余空间。我可以在固定位置的情况下做到这一点，但我正在尝试找出弹性框。所以我所有的尝试都不起作用。根据这篇文章：Flexbox layout我应该这么简单：

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

header {
    height: 75px;
}

main {
    flex: auto;
}

footer {
    height: 25px;
}

...但这只是行不通。我尝试将大小从像素更改为百分比 - 没有运气。中间部分只是塌陷，没有伸展。

我还在 Google 点击的首页中尝试了一些其他示例。没有任何效果。

我做错了什么。如何使用弹性盒子实现上述目标？

谢谢。

附：差点忘了。我的浏览器是 Chromium 34.0.1847.116 (260972)

【问题讨论】：

标签： html css

【解决方案1】：

我不知道你是如何尝试这种方法的，但它正在工作（至少现在）。

Here's a JSFiddle showing the layout - 我添加了一个微妙的背景色来说明拉伸。

<header>header</header>
<main>main</main>
<footer>footer</footer>

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

header {
    height: 75px;
}

main {
    flex: auto;
    background-color: #ccc;
}

footer {
    height: 25px;
}

【讨论】：

另外，不要忘记在main上设置overflow:auto，否则如果main的内容太大，页脚会被压下

【解决方案2】：

我们可以使用flexbox来实现下面的解决方案

* {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}

body {
display: flex;
flex-direction: column;
}

header {
height: 50px;
background-color: khaki;
}

main {
flex: auto;
background-color: pink;
}

footer {
height: 50px;
background-color: lightblue;
}

<body>
  <header>
    header
  </header>
  <main>
    main content
  </main>
  <footer>
    footer
  </footer>
</div>

【讨论】：