在其中一个元素中设置高度时，Flex布局奇怪的行为

Question

在下面的GIF中，可以看到当我将 { "sport": "Handball", "matches": [ {home: '...', other: '...', id: '...'}, {home: '...', other: '...', id: '...'}, {home: '...', other: '...', id: '...'}, {home: '...', other: '...', id: '...'}, ] } 设置为页脚元素时，布局会在sidenav和页脚之间添加一个空格。

这里的问题是什么？如何在没有此行为的情况下更改页脚元素的高度？我的css是：

height

Answer 1

您的容器设置为距文档底部60px，但页脚高度仅为50px，间距为10px。

我建议阅读this guide on flexbox，因为它包含一个类似于您尝试实现的底部示例，而不会不必要地使用定位。