使用Bulma创建固定导航栏、页脚与可滚动内容区域的教程-html教程-PHP中文网

使用Bulma创建固定导航栏、页脚与可滚动内容区域的教程

本文详细介绍了如何在bulma框架中实现固定顶部导航栏、固定底部页脚，并使中间内容区域可独立滚动。通过利用bulma提供的`is-fixed-top`、`is-fixed-bottom`类以及在`html>`标签上添加相应的`has-navbar-fixed-top`和`has-navbar-fixed-bottom`类，可以有效解决传统布局中内容溢出导致页脚被推出视口的问题，确保导航和页脚始终可见。

在现代网页设计中，固定导航栏和页脚是常见的需求，它们能提供一致的用户体验，无论页面内容多长，关键操作和信息始终触手可及。然而，当结合全屏高度布局（如Bulma的hero与is-fullheight）时，往往会遇到内容溢出导致页脚被推出视口的问题。本文将深入探讨如何利用Bulma的内置功能和少量CSS技巧，优雅地实现一个拥有固定头部、固定底部和可滚动中间内容的页面布局。

问题背景与传统挑战

开发者常希望创建一个页面，其中导航栏和页脚始终固定在页面的顶部和底部，而页面的主要内容区域在需要时可以独立滚动。在使用像Bulma这样的CSS框架时，尝试通过hero组件（特别是hero-head、hero-body、hero-footer结构配合is-fullheight）来实现这一目标时，往往会发现当hero-body内容过长时，hero-footer会被挤出视口，无法保持固定。这表明hero组件的设计初衷并非用于创建这种严格意义上的固定布局，而是更侧重于全屏高度的英雄区域展示。

解决此问题的核心在于，不应尝试将固定行为强加给hero组件的子元素，而应直接利用Bulma为固定元素提供的专门类。

Bulma的解决方案：固定导航栏与页脚

Bulma为实现固定导航栏和页脚提供了简洁而强大的类：is-fixed-top和is-fixed-bottom。这些类会利用CSS的position: fixed属性将元素固定在视口中。更重要的是，Bulma还提供了一对配套的类，用于调整页面内容的间距，以避免固定元素遮挡内容。

实现顶部固定导航栏

要将导航栏固定在页面顶部，只需在

<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      @@##@@
    </a>
    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>
  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">
        首页
      </a>
      <a class="navbar-item">
        文档
      </a>
    </div>
  </div>
</nav>

登录后复制

关键步骤： 仅仅添加is-fixed-top类是不够的。由于固定定位的元素会脱离文档流，它们可能会遮挡页面顶部的内容。为了解决这个问题，Bulma提供了一个特殊的辅助类has-navbar-fixed-top，需要将其添加到标签上。

<html class="has-navbar-fixed-top">
  <head>
    <!-- ... -->
  </head>
  <body>
    <!-- 导航栏和其他内容 -->
  </body>
</html>

登录后复制

has-navbar-fixed-top类会自动为

元素添加padding-top，其值等于Bulma导航栏的默认高度，从而确保页面内容不会被顶部导航栏遮挡。

实现底部固定页脚

与顶部导航栏类似，要实现底部固定页脚，可以在页脚元素（通常是

Blackink AI纹身生成

创建类似纹身的设计，生成独特纹身

查看详情

<nav class="navbar is-fixed-bottom is-dark" role="navigation" aria-label="footer navigation">
  <div class="navbar-item is-expanded">
    <div class="has-text-centered">
      <p>
        <strong>我的网站</strong> 由 <a href="#">你</a> 创建.
      </p>
    </div>
  </div>
</nav>

登录后复制

关键步骤： 同样，为了防止底部固定页脚遮挡页面底部内容，需要在标签上添加has-navbar-fixed-bottom类。

<html class="has-navbar-fixed-top has-navbar-fixed-bottom">
  <head>
    <!-- ... -->
  </head>
  <body>
    <!-- 导航栏、主要内容和页脚 -->
  </body>
</html>

登录后复制

has-navbar-fixed-bottom类会自动为

元素添加padding-bottom，其值等于Bulma导航栏的默认高度，确保页面内容不会被底部页脚遮挡。

整合固定元素与可滚动内容

当顶部导航栏和底部页脚都固定后，页面的主要内容区域将自然地占据两者之间的空间。如果这部分内容超出了视口高度，它将自动变得可滚动，而固定元素则保持不动。

以下是一个完整的HTML结构示例，展示了如何结合这些技术：

<!DOCTYPE html>
<html class="has-navbar-fixed-top has-navbar-fixed-bottom">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bulma 固定布局示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    <style>
        /* 示例：使内容区域足够长以触发滚动 */
        .long-content {
            min-height: 150vh; /* 确保内容足够长 */
            padding: 2rem;
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>

    <!-- 顶部固定导航栏 -->
    <nav class="navbar is-fixed-top is-primary" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <a class="navbar-item" href="#">
                @@##@@
            </a>
            <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>
        <div id="navbarBasicExample" class="navbar-menu">
            <div class="navbar-start">
                <a class="navbar-item">
                    主页
                </a>
                <a class="navbar-item">
                    关于我们
                </a>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="section">
        <div class="container long-content">
            <h1 class="title">欢迎来到我的页面</h1>
            <p class="subtitle">这是一个演示固定导航栏、页脚和可滚动内容的布局。</p>

            <div class="content">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                    [此处省略大量重复内容以模拟长页面]
                    ...
                </p>
                <p>
                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                </p>
                <p>
                    [此处省略大量重复内容以模拟长页面]
                    ...
                </p>
                <p>
                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
                </p>
                <p>
                    [此处省略大量重复内容以模拟长页面]
                    ...
                </p>
                <p>
                    最后一段内容，确保页脚不会被遮挡。
                </p>
            </div>
        </div>
    </main>

    <!-- 底部固定页脚 -->
    <nav class="navbar is-fixed-bottom is-dark" role="navigation" aria-label="footer navigation">
        <div class="navbar-item is-expanded">
            <div class="has-text-centered is-fullwidth">
                <p>
                    <strong>Bulma 固定布局</strong> 示例 © 2023. 保留所有权利.
                </p>
            </div>
        </div>
    </nav>

</body>
</html>

登录后复制

在上述示例中，main元素内部的.container.long-content模拟了页面的主要内容。通过设置min-height: 150vh，我们确保了内容足够长以触发页面滚动。此时，顶部和底部的导航栏将始终保持可见，而中间的内容区域则可以自由滚动。

注意事项

标签上的类至关重要： 务必将has-navbar-fixed-top和/或has-navbar-fixed-bottom添加到标签上。如果只添加到标签，在某些浏览器或特定布局下可能无法正确生效。
内容与固定元素的间距： Bulma的这些辅助类会自动计算导航栏的高度并添加相应的padding。如果您的导航栏高度与Bulma默认值不同，或者您使用了自定义的固定元素（非navbar），可能需要通过自定义CSS手动调整padding-top或padding-bottom。
Z-index： 固定定位的元素默认具有较高的z-index，以确保它们始终位于其他内容之上。如果您有多个固定元素或者需要控制它们之间的层叠顺序，可能需要手动调整z-index属性。
响应式设计： Bulma的navbar组件本身是响应式的，但is-fixed-top和is-fixed-bottom类在不同视口大小下表现一致。确保您的导航栏在移动设备上也能良好工作。
语义化： 尽管可以使用
标签作为页脚，但从HTML语义化的角度，
标签通常是更合适的选择。Bulma的is-fixed-bottom类同样适用于
元素。

总结

通过利用Bulma提供的is-fixed-top和is-fixed-bottom类，并配合在标签上添加has-navbar-fixed-top和has-navbar-fixed-bottom辅助类，可以轻松实现一个具有固定顶部导航栏、固定底部页脚和可滚动中间内容区域的专业级页面布局。这种方法避免了传统布局中常见的溢出问题，确保了用户界面的稳定性和一致性。理解并正确运用这些Bulma特性，将大大提升您的网页开发效率和用户体验。