我有一个最简单的情况
<!DOCTYPE html>
<html>
<head>
<title>Whatever</title>
</head>
<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>
所以我希望我的标题可以说是15%,我的页脚是5%,而我的主要部分则占据了中间的剩余空间.我可以通过固定位置来做到这一切,但我想弄清楚弹性框.所以我的所有尝试都不起作用.根据这篇文章:Flexbox布局我应该这么简单:
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热门首页中尝试了其他一些示例.什么都行不通.
我究竟做错了什么.如何通过柔性盒实现上述目标？
谢谢.
PS几乎忘记了.我的浏览器是Chromium 34.0.1847.116(260972)
Mat*_*Vad 22
我不知道你是怎么尝试这种方法的,但是它起作用了(现在至少).
这是一个显示布局的JSFiddle - 我添加了一个微妙的背景颜色来说明拉伸.
<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;
}