本文详细阐述如何在bulma框架下实现固定在页面顶部和底部的导航栏与页脚，同时确保中间内容区域可独立滚动。通过利用bulma提供的`is-fixed-top`和`is-fixed-bottom`类，并配合`has-navbar-fixed-top`和`has-navbar-fixed-bottom`等辅助类，可以有效解决传统`hero`组件在内容过长时页脚被推出视口的问题，从而创建出具有良好用户体验的响应式布局。
在现代网页设计中，保持页面的导航栏（页眉）和页脚始终可见，同时允许主体内容区域独立滚动，是一种常见的用户体验需求。这确保了用户无论内容多长，都能方便地访问导航和版权信息。然而，在使用像Bulma这样的CSS框架时，如果不了解其特定机制，可能会遇到一些挑战，例如当内容区域过长时，页脚被推出视口的问题。
许多开发者尝试使用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）固定在底部。
步骤：
添加固定页脚类： 在你的
<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 class="has-navbar-fixed-top has-navbar-fixed-bottom"> -->
<body>
<!-- ... -->
</body>
</html>请注意，如果同时使用固定顶部导航栏和固定底部页脚，你需要同时添加has-navbar-fixed-top和has-navbar-fixed-bottom类。
通过上述步骤，你的导航栏和页脚将始终固定在视口顶部和底部。页面的主要内容区域（例如一个 完整示例结构： 通过采用Bulma的固定定位类，我们可以轻松实现具有固定页眉、页脚和可滚动内容区域的复杂布局，从而提升用户界面的可用性和专业性。这种方法比尝试强制hero-body滚动更为健壮和符合框架设计哲学。<!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>. 版权所有 © 2023.
</p>
</div>
</footer>
</body>
</html>注意事项与总结
html.has-navbar-fixed-top {
padding-top: 52px; /* 根据你的导航栏实际高度调整 */
}
html.has-navbar-fixed-bottom {
padding-bottom: 52px; /* 根据你的页脚实际高度调整 */
}
以上就是使用Bulma构建固定页眉页脚与可滚动内容区域的布局的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
945
收藏
