如何使用 bulma 的 flexbox 让页脚贴在页面底部？

Question

我刚刚开始学习 reactjs 和 bulma.css。我正在尝试使用 bulma 的 flexbox 使 <footer> 固定在页面底部，因为我想避免编写自己的 css 规则。

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

import "bulma/css/bulma.css";

但我下面的代码仍然使 <footer> 粘在 header..

下

<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

straightforward-bulma 方式类似于：

确保正文和html是整页高度
由于这是每个 project-dependent，我现在使用经典 body { height: 100vh; }
同container一样，需要放大。使用is-fullheight从hero元素可以使用（注意：考虑使用英雄而不是容器）
给页脚一个 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>

如何使用 bulma 的 flexbox 让页脚贴在页面底部？

how to use bulma's flexbox to make footer stick to bottom of page?

reactjs

flexbox

bulma