7

我正在使用 Bulma CSS 框架设计网页样式。

好吧，它工作得很好，但是当我尝试在我的页面上添加页脚时，它不会进入底部。

我需要为它制作自己的 CSS 还是 HTML 代码本身的问题？

代码：

<section class="section">
    <div class="container">
        <div class="columns">
            <div class="column is-three-quarters">
                <nav class="panel">
                    <p class="panel-heading">
                        Category #1
                    </p>
                    <div class="panel-block">
                        <p>Test descriptie</p>
                    </div>
                </nav>

                <nav class="panel">
                    <p class="panel-heading">
                        Category #2
                    </p>
                    <div class="panel-block">
                        <p>Test descriptie</p>
                    </div>
                </nav>

                <nav class="panel">
                    <p class="panel-heading">
                        Category #3
                    </p>
                    <div class="panel-block">
                        <p>Test descriptie</p>
                    </div>
                </nav>
            </div>

            <div class="column">
                <nav class="panel">
                    <p class="panel-heading">
                        Laatste statistieken
                    </p>

                    <div class="panel-block">
                        <p>Hier komen de URL's te staan, in een lijst</p>
                    </div>
                </nav>
            </div>

        </div>
    </div>
    </div>

    <div class="hero-foot">
        <p>waarom sta jij niet op de bottom van de <b><s>FUCKING PAGINA!?</s>s></b></p>
    </div>
</section>
4

4 回答 4

17

这可以解决问题（你的 style.css）：

.main {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.section {
  flex: 1;
}

然后像这样调整你的模板：

<body class="main">
  <div class="section">
    ...
  </div>
  <footer class="footer">
    ...
  </footer>
</body>
于 2018-10-12T12:27:56.260 回答
8

由于 Bulma 仍然不支持“粘性”页脚，因此这是最简单的方法：

html,
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body > footer {
    margin-top: auto;
}

它适用于 Chrome、Safari、Firefox、Edge 和 Internet Explorer 11。

于 2019-08-09T15:34:05.130 回答
1

您可以为您的页脚设置一个固定的高度，然后使用 calc() 相应地计算容器的高度：

.main-content {
  height: calc(100vh - 80px);
}

.hero-foot {
  height: 80px;
}

演示

于 2017-05-01T22:07:47.003 回答
-2

Bulma Docs - 页脚

关于您的示例代码，我注意到了两件事：

  • 将页脚移到部分标签之外
  • Bulma 使用“footer”作为其类名，而不是“hero-foot”

<!DOCTYPE html>
<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.min.css" rel="stylesheet" />
</head>

<body>
  <section class="section">
    <div class="container">
      <div class="columns">
        <div class="column is-three-quarters">
          <nav class="panel">
            <p class="panel-heading">
              Category #1
            </p>
            <div class="panel-block">
              <p>Test descriptie</p>
            </div>
          </nav>
          <nav class="panel">
            <p class="panel-heading">
              Category #2
            </p>
            <div class="panel-block">
              <p>Test descriptie</p>
            </div>
          </nav>
          <nav class="panel">
            <p class="panel-heading">
              Category #3
            </p>
            <div class="panel-block">
              <p>Test descriptie</p>
            </div>
          </nav>
        </div>

        <div class="column">
          <nav class="panel">
            <p class="panel-heading">
              Laatste statistieken
            </p>
            <div class="panel-block">
              <p>Hier komen de URL's te staan, in een lijst</p>
            </div>
          </nav>
        </div>
      </div>

    </div>


  </section>

  <div class="footer">
    <p>waarom sta jij niet op de bottom van de <b><s>FUCKING PAGINA!?</s>s></b></p>
  </div>
</body>

</html>

于 2017-05-04T02:02:04.910 回答