Menu
I have a simplest situation with
<!DOCTYPE html>
<html>
<head>
<title>Whatever</title>
</head>
<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>
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.
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?
Thanks.
P.S. Almost forgot. My browser is Chromium 34.0.1847.116 (260972)
480
The two axes of flexbox The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it. Everything we do with flexbox refers back to these axes, so it is worth understanding how they work from the outset.
Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces.
Flexbox in Action When flexbox is applied to the header element, it will make all the child items in the same line. Then, all you need is to apply justify-content to distribute the spacing between them.
I don't know how you where trying to this method out, but it's working (now at least).
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
