Question

我最简单的情况是

<!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热门首页中尝试了其他一些示例。什么都行不通。

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

感谢。

P.S。差点忘了。我的浏览器是Chromium 34.0.1847.116（260972）

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

Answer 2

最后，即在您的页脚标记之后，您可以添加此javascript代码

<script>
var header = document.getElementsByTagName("header")[0];
var main = document.getElementsByTagName("main")[0];
var footer = document.getElementsByTagName("footer")[0];

header.style.height=screen.height*0.15+"px";
main.style.height=screen.height*0.80+"px";
footer.style.height=screen.height*0.05+"px";    
</script>

CSS flexbox：标题，主页，页脚布局。主要部分在中间坍塌

2 个答案: