CODEWITHSUNDEEP
flexbox
Petro Gromovo
Petro Gromovo

Reputation: 2173

Why footer is not bottom aligned

I learn flexbox by some manuals and trying to repeat example, with html code :

body {
    display: flex;
    flex-direction: column;
    background-color: yellow;
}

footer {
    height: 20vh;   /*you can use pixels e.g. 200px*/;
    background-color: green;
}

header {
    height: 20vh;  /*you can use pixels e.g. 200px*/;
    background-color: blue;
}

main {
    display: flex;
    /*height: calc(100vh - 40vh);*/
    border: 3px dotted red;
    flex: 1;
}
	
aside {
    width: 20vw;
}

nav {
    width: 20vw;
    order: -1;
}

article {
    flex: 1;
}
<body >
<header>Header</header>
<main>
	<article>Article</article>
	<nav>Nav</nav>
	<aside>Aside</aside>
</main>
<footer>Footer</footer>
</body>

you can look at it live : https://jsfiddle.net/tq6p21jw/ can somebody say why footer is not bottom aligned?

Upvotes: 0

Views: 24

Answers (1)

ysf
ysf

Reputation: 4854

header and footer have fixed height. and you want main to take remaining space by setting display: flex; and flex: 1 which is correct. the problem is there is no remaining space to take for main because the height of body is not set explicitly. so body grows as much as it's contents' height.

giving body a fixed height should solve your problem.

body {
    display: flex;
    flex-direction: column;
    background-color: yellow;
    height: 100vh;
}

Upvotes: 1

Related Questions