问题描述
我的情况最简单
<!DOCTYPE html>
<html>
<head>
<title>Whatever</title>
</head>
<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>
所以我想说页眉.. 15%,页脚5%,主要部分占据中间的其余空间.我可以在固定位置等条件下进行操作,但是我想弄清楚弹性盒.因此,我所有的尝试都行不通.根据这篇文章: Flexbox布局我应该像这样简单:
So I want my header to be say .. 15%, my footer 5% and my main part taking the rest of the space in the middle.I can do it with position fixed and all that but I am trying to figure out the flex boxes.So all my attempts don't work.According to this article: Flexbox layout I should have it as simple as this:
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;
}
...但这是行不通的.我尝试将尺寸从像素更改为百分比-不走运.中间部分只是塌陷而没有伸展.
... but this just does not work. I tried changing sizes from pixels to percentage - no luck. The middle part just collapses and it does not stretch.
我还尝试了Google匹配首页中的其他几个示例.什么都行不通.
I also tried few other examples within the first page of Google hits. Nothing works.
我在做什么错.如何使用弹性盒实现以上目的?
What am I doing wrong. How can I achieve the above with flex boxes?
谢谢.
P.S.差点忘了.我的浏览器是Chromium 34.0.1847.116(260972)
P.S. Almost forgot. My browser is Chromium 34.0.1847.116 (260972)
推荐答案
我不知道您如何尝试此方法,但它正在起作用(至少现在是这样).
I don't know how you where trying to this method out, but it's working (now at least).
这是显示布局的JSFiddle -我添加了细微的背景色来说明拉伸.
Here's a JSFiddle showing the layout - I added a subtle background-color to illustrate the 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;
}
这篇关于CSS flexbox:页眉,主要,页脚布局.主体塌陷在中间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!