如何在bootstrap 4中只让中央面板滚动，而让导航栏和侧边栏保持在固定的位置？

在Bootstrap 4中，要实现中央面板滚动而导航栏和侧边栏保持固定位置的效果，可以通过CSS来控制各个部分的定位和滚动行为。以下是实现这一效果的步骤：

基础概念

定位（Positioning）：CSS中的定位属性（如position: fixed;）可以让元素相对于视口固定位置。
滚动（Scrolling）：通过设置容器的overflow属性，可以控制内容的滚动行为。

实现步骤

HTML结构：
HTML结构：
CSS样式：
CSS样式：

应用场景

这种布局适用于需要固定导航栏和侧边栏，而中央面板内容需要滚动的页面，例如仪表盘、管理后台等。

可能遇到的问题及解决方法

滚动条不出现：
- 确保.content容器的高度设置正确，并且内容超出了容器的高度。
- 检查是否有其他CSS样式影响了滚动条的显示。

侧边栏和导航栏重叠：
- 确保侧边栏和导航栏的z-index值设置正确，使得导航栏在最上层，侧边栏在内容层之上。
内容高度计算错误：
- 使用calc()函数来动态计算内容的高度，确保减去导航栏和侧边栏的高度。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Navbar and Sidebar</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .navbar {
            z-index: 1000;
        }

        .sidebar {
            height: 100vh;
            z-index: 999;
        }

        .content {
            padding-top: 56px;
            padding-bottom: 50px;
            overflow-y: auto;
            height: calc(100% - 106px);
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
            <a class="navbar-brand" href="#">Navbar</a>
        </nav>
        <div class="row">
            <div class="col-md-3 col-lg-2 bg-light sidebar fixed-bottom">
                <p>Sidebar Content</p>
            </div>
            <div class="col-md-9 col-lg-10 offset-md-3 offset-lg-2 content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
                <!-- 更多内容 -->
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>