Question

我通过一些手册来学习flexbox，并尝试重复示例，带有html代码：

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>

您可以实时查看： https://jsfiddle.net/tq6p21jw/ 有人可以说为什么页脚底部不对齐吗？

Answer 1

header和footer具有固定的高度。并且您希望main通过设置正确的display: flex;和flex: 1来占用剩余空间。问题是main没有剩余空间，因为body的高度没有明确设置。所以身体会随着内容的高度增长。

给身体一个固定的高度应该可以解决您的问题。

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

为什么页脚未与底部对齐

1 个答案: