Bulma固定导航栏与页脚：实现可滚动内容区域的专业指南-html教程-PHP中文网

Bulma固定导航栏与页脚：实现可滚动内容区域的专业指南

本文详细介绍了如何在bulma框架中实现固定顶部导航栏和底部页脚，同时确保页面主体内容可独立滚动。通过利用bulma提供的`is-fixed-top`和`is-fixed-bottom`类，以及相应的html根元素类如`has-navbar-fixed-top`和`has-navbar-fixed-bottom`，开发者可以轻松构建出用户体验友好的固定式布局，避免内容溢出导致页脚被推出视口的问题。

在现代Web应用设计中，固定（sticky）的导航栏和页脚是常见的UI模式，它们能确保用户无论滚动到页面何处，都能方便地访问关键功能或信息。然而，当页面主体内容较长时，如何实现主体内容的可滚动性，同时保持顶部和底部元素的固定，是一个需要技巧的问题。本文将深入探讨如何在流行的CSS框架Bulma中优雅地解决这一挑战。

理解固定布局的需求

通常，我们希望实现以下布局：

顶部导航栏：始终停留在视口顶部。
底部页脚：始终停留在视口底部。
中间内容区域：当内容溢出时，该区域自身可滚动，而导航栏和页脚保持不动。

直接使用如Bulma的hero组件配合is-fullheight可能无法直接满足这一需求。hero组件旨在创建一个占据整个视口高度的区块，其内部的hero-body会填充剩余空间。但如果hero-body的内容过长，它会推动hero-footer超出视口，这与我们希望页脚始终可见的目标相悖。正确的解决方案是利用Bulma提供的固定组件类。

实现固定顶部导航栏

Bulma为导航栏提供了内置的固定功能。要将导航栏固定在页面顶部，你需要做两件事：

为导航栏添加固定类：在nav元素上添加is-fixed-top类。
调整HTML根元素：为了避免固定导航栏覆盖页面顶部内容，需要在或元素上添加has-navbar-fixed-top类。这个类会为页面顶部添加一个与导航栏高度相等的内边距（padding），从而将页面内容向下推，确保其在导航栏下方可见。

示例代码：

<!DOCTYPE html>
<html class="has-navbar-fixed-top">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>固定顶部导航栏示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
    <style>
        /* 仅为示例内容添加高度，以便演示滚动 */
        .content-section {
            padding: 20px;
            min-height: 150vh; /* 确保内容足够长以触发滚动 */
            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 class="navbar-end">
                <div class="navbar-item">
                    <div class="buttons">
                        <a class="button is-light">登录</a>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 页面主体内容 -->
    <section class="section content-section">
        <div class="container">
            <h1 class="title">欢迎来到我的网站</h1>
            <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>... (重复大量内容以填充页面)</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1018">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680070837936.jpg" alt="Narration Box">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1018">Narration Box</a>
                            <p>Narration Box是一种语音生成服务，用户可以创建画外音、旁白、有声读物、音频页面、播客等</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Narration Box">
                                <span>68</span>
                            </div>
                        </div>
                        <a href="/ai/1018" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Narration Box">
                        </a>
                    </div>
                
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>这是页面内容的末尾，上面有很多内容，您可以滚动查看。</p>
        </div>
    </section>

    <script>
        // 激活 Bulma 导航栏的汉堡菜单（如果需要）
        document.addEventListener('DOMContentLoaded', () => {
            const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
            if ($navbarBurgers.length > 0) {
                $navbarBurgers.forEach( el => {
                    el.addEventListener('click', () => {
                        const target = el.dataset.target;
                        const $target = document.getElementById(target);
                        el.classList.toggle('is-active');
                        $target.classList.toggle('is-active');
                    });
                });
            }
        });
    </script>
</body>
</html>

登录后复制

实现固定底部页脚

与固定顶部导航栏类似，Bulma也支持将元素固定在页面底部。虽然Bulma的文档主要围绕navbar组件来讲解固定功能，但is-fixed-bottom类可以应用于任何你希望固定在底部的元素。通常，我们会用一个footer元素或另一个nav元素来充当页脚。

为页脚元素添加固定类：在footer或充当页脚的nav元素上添加is-fixed-bottom类。
调整HTML根元素：为了避免固定页脚覆盖页面底部内容，需要在或元素上添加has-navbar-fixed-bottom类。这个类会为页面底部添加一个与页脚高度相等的内边距，确保内容不会被页脚遮挡。

示例代码：

<!DOCTYPE html>
<html class="has-navbar-fixed-bottom">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>固定底部页脚示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
    <style>
        /* 仅为示例内容添加高度，以便演示滚动 */
        .content-section {
            padding: 20px;
            min-height: 150vh; /* 确保内容足够长以触发滚动 */
            background-color: #f5f5f5;
        }
        .fixed-footer {
            height: 52px; /* 模拟页脚高度，Bulma的navbar默认高度 */
            line-height: 52px;
            text-align: center;
            color: white;
            background-color: #363636;
        }
    </style>
</head>
<body>
    <!-- 页面主体内容 -->
    <section class="section content-section">
        <div class="container">
            <h1 class="title">欢迎来到我的网站</h1>
            <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>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>这是页面内容的末尾，上面有很多内容，您可以滚动查看。</p>
        </div>
    </section>

    <!-- 固定底部页脚 -->
    <footer class="navbar is-fixed-bottom fixed-footer">
        <div class="container">
            <p>&copy; 2023 我的公司. 保留所有权利。</p>
        </div>
    </footer>
</body>
</html>

登录后复制

结合固定顶部导航栏和底部页脚

要同时拥有固定顶部导航栏和固定底部页脚，并使中间内容区域可滚动，你需要将上述两种方法结合起来。

顶部导航栏：使用is-fixed-top类。
底部页脚：使用is-fixed-bottom类。
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>固定顶部导航栏与底部页脚示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
    <style>
        /* 仅为示例内容添加高度，以便演示滚动 */
        .content-section {
            padding: 20px;
            /* 确保内容足够长以触发滚动，但也要考虑固定元素的高度 */
            min-height: calc(100vh - 52px - 52px); /* 视口高度 - 导航栏高度 - 页脚高度 */
            background-color: #f5f5f5;
            overflow-y: auto; /* 确保内容区域自身可滚动 */
        }
        .fixed-footer {
            height: 52px; /* 模拟页脚高度，与导航栏高度一致 */
            line-height: 52px;
            text-align: center;
            color: white;
            background-color: #363636;
        }
    </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 class="navbar-end">
                <div class="navbar-item">
                    <div class="buttons">
                        <a class="button is-light">登录</a>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 页面主体内容 -->
    <section class="section content-section">
        <div class="container">
            <h1 class="title">欢迎来到我的网站</h1>
            <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>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>... (重复大量内容以填充页面)</p>
            <p>这是页面内容的末尾，上面有很多内容，您可以滚动查看。</p>
        </div>
    </section>

    <!-- 固定底部页脚 -->
    <footer class="navbar is-fixed-bottom fixed-footer">
        <div class="container">
            <p>&copy; 2023 我的公司. 保留所有权利。</p>
        </div>
    </footer>

    <script>
        // 激活 Bulma 导航栏的汉堡菜单（如果需要）
        document.addEventListener('DOMContentLoaded', () => {
            const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
            if ($navbarBurgers.length > 0) {
                $navbarBurgers.forEach( el => {
                    el.addEventListener('click', () => {
                        const target = el.dataset.target;
                        const $target = document.getElementById(target);
                        el.classList.toggle('is-active');
                        $target.classList.toggle('is-active');
                    });
                });
            }
        });
    </script>
</body>
</html>

登录后复制

注意事项

HTML根元素类：has-navbar-fixed-top和has-navbar-fixed-bottom类是Bulma为了处理固定元素遮挡内容而提供的便捷方案。它们通过向html或body元素添加padding-top和padding-bottom来创建必要的偏移量。
元素高度：has-navbar-fixed-top和has-navbar-fixed-bottom类假定固定元素的高度与Bulma默认导航栏的高度（通常是52px）一致。如果你的固定导航栏或页脚有自定义高度，你可能需要通过自定义CSS覆盖Bulma的默认padding值，或者使用JavaScript动态计算并设置。
语义化：尽管可以将is-fixed-bottom应用于任何元素，但从语义化的角度考虑，将页脚内容放置在
标签内是最佳实践。
响应式设计：Bulma的固定导航栏默认是响应式的，在移动设备上会折叠成汉堡菜单。确保你的固定页脚也考虑了不同屏幕尺寸下的显示效果。
替代方案：如果不在Bulma环境下，你可以使用纯CSS的position: fixed; top: 0;和position: fixed; bottom: 0;来实现固定元素，然后通过在body或主要内容容器上设置相应的padding-top和padding-bottom来避免内容遮挡。

总结

通过利用Bulma提供的is-fixed-top和is-fixed-bottom类，结合在HTML根元素上添加has-navbar-fixed-top和has-navbar-fixed-bottom类，我们可以轻松地在Bulma项目中实现具有固定顶部导航栏和底部页脚，同时中间内容区域可独立滚动的布局。这种方法比尝试修改hero-body的滚动行为更为直接和健壮，是构建专业Web界面的推荐实践。