Question

我使用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>

感谢。

Answer 1

这可以解决问题（您的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>

Answer 2

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

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

.hero-foot {
  height: 80px;
}

Demo

Answer 3

我知道这是一个古老的问题，但是由于布尔玛仍然不支持“粘性”页脚，所以这是最简单的方法：

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

可在Chrome，Safari，Firefox，Edge和IE11中使用。

Answer 4

Bulma Docs - Footer

我注意到有关示例代码的两件事：

将您的页脚移到部分标记
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>

英雄页脚不在页面底部

4 个答案: