如何使用布尔玛的弹性框使页脚粘在页面底部？

Question

我刚刚开始学习reactjs和bulma.css。我正在尝试使用bulma的flexbox制作一个<footer>，以粘贴到页面底部，因为我想避免编写自己的css规则。

我已经使用npm安装了bulma，并在index.js中导入了bulma.css，就像这个一样

import "bulma/css/bulma.css";

但我下面的代码仍然使<footer>卡在标题下。。

<div className='container'>
<header className='has-text-centered'>
<h1>My Store</h1>
</header>
<div>
<h2>Dashboard Title</h2>
</div>
<footer className="has-text-centered is-flex-align-items-flex-end">
<small>
<span>Copyright @2022</span>
<br />
</small>
<a href="/">About</a>
</footer>
</div>

Answer 1

简单的bulma方式看起来像：

1. 确保正文和html是整页高度
   由于这是每个项目的依赖项，我现在使用了经典的body { height: 100vh; }

2. 与container相同，需要放大。可以使用来自hero元素的is-fullheight(注意：考虑使用英雄而不是容器(

3. 给页脚一个mt-auto，它是margin-top: auto的缩写。这将迫使页脚粘贴到页面的底部

html, body { height: 100vh; }

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<div class='container hero is-fullheight'>
<header class='has-text-centered'>
<h1>My Store</h1>
</header>
<div>
<h2>Dashboard Title</h2>
</div>
<footer class="has-text-centered is-flex-align-items-flex-end mt-auto">
<small>
<span>Copyright @2022</span>
<br />
</small>
<a href="/">About</a>
</footer>
</div>