使用Bulma构建固定页眉页脚与可滚动内容区域的布局-html教程-PHP中文网

使用Bulma构建固定页眉页脚与可滚动内容区域的布局

本文详细阐述如何在bulma框架下实现固定在页面顶部和底部的导航栏与页脚，同时确保中间内容区域可独立滚动。通过利用bulma提供的`is-fixed-top`和`is-fixed-bottom`类，并配合`has-navbar-fixed-top`和`has-navbar-fixed-bottom`等辅助类，可以有效解决传统`hero`组件在内容过长时页脚被推出视口的问题，从而创建出具有良好用户体验的响应式布局。

在现代网页设计中，保持页面的导航栏（页眉）和页脚始终可见，同时允许主体内容区域独立滚动，是一种常见的用户体验需求。这确保了用户无论内容多长，都能方便地访问导航和版权信息。然而，在使用像Bulma这样的CSS框架时，如果不了解其特定机制，可能会遇到一些挑战，例如当内容区域过长时，页脚被推出视口的问题。

传统hero组件的局限性

许多开发者尝试使用Bulma的hero组件配合is-fullheight类来构建全屏布局，并希望其子元素hero-head、hero-body和hero-footer能够实现固定页眉页脚和可滚动内容的效果。然而，hero组件的is-fullheight特性旨在使其占据整个视口高度，而hero-body会根据内容扩展。当hero-body的内容超出视口高度时，hero-footer就会被推到视口之外，导致其无法固定显示。

要解决这个问题，我们需要采用Bulma提供的固定定位（Fixed Positioning）机制，而不是依赖hero组件来管理整个页面的布局。

实现固定页眉（导航栏）

Bulma为导航栏提供了方便的固定定位类。通过将is-fixed-top类应用于navbar组件，可以使其始终固定在视口顶部。

步骤：

添加固定导航栏类： 在你的

<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      @@##@@
    </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">
        Home
      </a>
      <a class="navbar-item">
        Documentation
      </a>
    </div>
    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
            <strong>Sign up</strong>
          </a>
          <a class="button is-light">
            Log in
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>

登录后复制

处理内容重叠问题： 当导航栏固定在顶部时，它会脱离文档流，导致其下方的页面内容向上移动并可能被导航栏遮挡。为了解决这个问题，Bulma提供了has-navbar-fixed-top类，该类会给html>或

元素添加适当的顶部内边距（padding），以确保内容不会被遮挡。

<html class="has-navbar-fixed-top">
<!-- 或 <body class="has-navbar-fixed-top"> -->
<body>
    <!-- 你的固定导航栏 -->
    <nav class="navbar is-fixed-top">...</nav>
    <!-- 页面主要内容 -->
    <section class="section">
        <div class="container">
            <h1 class="title">我的可滚动内容</h1>
            <!-- 大量内容以确保滚动 -->
        </div>
    </section>
    <!-- 你的固定页脚 -->
    <footer class="footer is-fixed-bottom">...</footer>
</body>
</html>

登录后复制

实现固定页脚

与固定页眉类似，Bulma也提供了is-fixed-bottom类来固定元素到视口底部。通常，我们会将一个footer元素（或一个样式为页脚的navbar）固定在底部。

GitFluence

AI驱动的Git命令生成器，可帮助您快速找到正确的命令

查看详情

步骤：

添加固定页脚类： 在你的

<footer class="footer is-fixed-bottom">
  <div class="content has-text-centered">
    <p>
      <strong>Bulma Fixed Footer</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
      <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
      is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
    </p>
  </div>
</footer>

登录后复制

处理内容重叠问题： 同样地，固定页脚也会脱离文档流。Bulma提供了has-navbar-fixed-bottom类来为或
元素添加底部内边距，以防止主要内容被页脚遮挡。
```
<html class="has-navbar-fixed-top has-navbar-fixed-bottom">

<body>
    
</body>
</html>
```
登录后复制
请注意，如果同时使用固定顶部导航栏和固定底部页脚，你需要同时添加has-navbar-fixed-top和has-navbar-fixed-bottom类。

整合与可滚动内容区域

通过上述步骤，你的导航栏和页脚将始终固定在视口顶部和底部。页面的主要内容区域（例如一个

或

）将自动占据两者之间的空间。当这个主要内容区域的内容超出其可用高度时，浏览器会自动为其生成滚动条，实现你所需的可滚动效果。

完整示例结构：

<!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.3/css/bulma.min.css">
    <style>
        /* 示例样式，确保内容足够长以触发滚动 */
        .long-content {
            height: 150vh; /* 使内容高度远超视口，以便观察滚动效果 */
            background-color: #f5f5f5;
            padding: 2rem;
        }
    </style>
</head>
<body>

    <!-- 固定顶部导航栏 -->
    <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="navbarExample">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div id="navbarExample" 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">
            <h1 class="title">欢迎来到我的网站！</h1>
            <p class="subtitle">这是一个带有固定页眉和页脚的页面。</p>

            <div class="content long-content">
                <p>
                    这里是页面的主要内容。当这些内容足够长时，您会发现只有这个区域可以滚动，而顶部的导航栏和底部的页脚始终保持可见。
                    这种布局对于需要展示大量信息，同时又希望用户能够随时访问重要导航链接和版权信息的网站非常有用。
                </p>
                <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>
                    Curabitur pretium tincidunt lacus, ac venenatis enim semper sit amet. Proin sit amet purus eu velit lacinia facilisis. Mauris sed odio in massa posuere tristique. Donec nec metus id felis ullamcorper efficitur. Sed sit amet nisl id enim tincidunt ultrices. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus in arcu sit amet purus.
                </p>
                <!-- 重复内容以确保滚动 -->
                <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>
                    Curabitur pretium tincidunt lacus, ac venenatis enim semper sit amet. Proin sit amet purus eu velit lacinia facilisis. Mauris sed odio in massa posuere tristique. Donec nec metus id felis ullamcorper efficitur. Sed sit amet nisl id enim tincidunt ultrices. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus in arcu sit amet purus.
                </p>
                <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>
                    Curabitur pretium tincidunt lacus, ac venenatis enim semper sit amet. Proin sit amet purus eu velit lacinia facilisis. Mauris sed odio in massa posuere tristique. Donec nec metus id felis ullamcorper efficitur. Sed sit amet nisl id enim tincidunt ultrices. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus in arcu sit amet purus.
                </p>
            </div>
        </div>
    </main>

    <!-- 固定底部页脚 -->
    <footer class="footer is-fixed-bottom">
      <div class="content has-text-centered">
        <p>
          <strong>Bulma固定页脚示例</strong>. 版权所有 &copy; 2023.
        </p>
      </div>
    </footer>

</body>
</html>

登录后复制

注意事项与总结

Bulma版本兼容性： 确保你使用的Bulma版本支持is-fixed-top、is-fixed-bottom以及对应的has-navbar-fixed-top和has-navbar-fixed-bottom类。这些是Bulma的核心功能，通常在所有现代版本中都可用。

自定义样式： 如果Bulma提供的默认间距不完全符合你的设计，你可以通过自定义CSS覆盖html或body上的padding-top和padding-bottom值。例如：

html.has-navbar-fixed-top {
    padding-top: 52px; /* 根据你的导航栏实际高度调整 */
}
html.has-navbar-fixed-bottom {
    padding-bottom: 52px; /* 根据你的页脚实际高度调整 */
}

登录后复制

Z-index： 固定定位的元素默认具有较高的堆叠顺序。如果遇到其他元素遮挡固定导航栏或页脚的问题，可能需要手动调整它们的z-index值。
响应式设计： 确保在不同屏幕尺寸下，固定元素和可滚动内容的布局依然表现良好。Bulma的navbar组件本身是响应式的，但你可能需要对内容区域进行额外的媒体查询调整。

通过采用Bulma的固定定位类，我们可以轻松实现具有固定页眉、页脚和可滚动内容区域的复杂布局，从而提升用户界面的可用性和专业性。这种方法比尝试强制hero-body滚动更为健壮和符合框架设计哲学。