html - CSS flexbox : Header, 主要，页脚布局。主体部分在中间塌陷-6ren

html - CSS flexbox : Header, 主要，页脚布局。主体部分在中间塌陷

转载作者：太空狗更新时间：2023-10-29 14:45:57

我有一个最简单的情况

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

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

所以我希望我的页眉占 .. 15%，我的页脚占 5%，我的主要部分占据中间的剩余空间。我可以在固定位置的情况下做到这一点，但我正在尝试找出 flexbox 。所以我所有的尝试都不奏效。根据这篇文章: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;
}

...但这行不通。我尝试将大小从像素更改为百分比 - 运气不好。中间部分只是塌陷，不会拉伸(stretch)。

我还在 Google 命中的第一页中尝试了其他几个示例。什么都没用。

我做错了什么。如何使用 flex box 实现上述目标？

谢谢。

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

最佳答案

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

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

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