本文介绍了CSS flexbox:页眉,主要,页脚布局.主体塌陷在中间的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的情况最简单

<!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:页眉,主要,页脚布局.主体塌陷在中间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-28 08:12
查看更多