Bulma/Flexbox 页脚没有贴在页面底部

Question

我正在使用 Vue 和 Laravel 制作一个应用程序，使用 Bulma 作为我的 CSS 框架。我想要一个保留在页面底部的页脚，即使内容 'push' 不在那里也是如此。目前我的习惯中有这个 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>

当有足够的内容将页脚推到底部或超出底部时，此方法工作正常。但如果没有，则屏幕底部会出现很大的间隙，页脚会被推到内容的底部。给出了什么？

Answer 1

Flex 属性仅在 parent 和 child 元素之间有效。 children之外没有继承。所以如果你有这样的事情：

<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 属性的范围：

了解弹性自动边距：

Bulma/Flexbox 页脚没有贴在页面底部

Bulma/Flexbox footer not sticking to the bottom of the page

css

flexbox

bulma