我正在使用 Bulma 作为我的 CSS 框架，使用 Vue 和 Laravel 制作一个应用程序。我想要一个页脚保留在页面底部，即使内容没有将其“推”到那里。目前我的自定义 CSS 中有这个：
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#app{
flex:1;
}
#app是我的默认 Blade 模板中的 div，我的应用程序被注入到其中：
<body>
<div id="app">
<index></index>
</div>
</body>
这是我的主要 Vue 组件，其中注入了路由组件
<template>
<div>
<Navigation/>
<router-view :key="$route.fullPath"></router-view>
<footer class="footer">Test</footer>
</div>
</template>
当有足够的内容将页脚推到或超出底部时，这种方法效果很好。但如果没有，屏幕底部就会出现很大的间隙，并且页脚会被直接推到内容的底部。是什么赋予了？
Flex 属性仅在父元素和子元素之间起作用。除了孩子之外，没有任何遗产。所以如果你有这样的事情：
<body>
<div id="app">
<header></header>
<main></main>
<footer></footer>
</div>
</body>
。。。并且想要始终将页脚固定在底部，您需要这样的东西：
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#app {
flex: 1;
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
有关 flex 属性范围的更多信息：
了解弹性自动边距：