如何在Bootstrap 4中仅让中间面板可滚动，固定导航栏与侧边栏？

Got it, let's solve that scrolling problem for you! The core issue with the example you found is that it lets the whole page scroll instead of confining scroll to the middle section. Using Bootstrap 4's flexbox utilities, we can easily lock the header and footer in place while making the middle panel fill the remaining viewport space, with only its content scrollable.

Here's a complete, working implementation:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scrollable Middle Panel</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    /* Remove default body margin to avoid extra space */
    body {
      margin: 0;
    }
    /* Ensure the container takes full viewport height */
    .viewport-container {
      min-height: 100vh;
    }
    /* Make the middle content area scrollable when content overflows */
    .scrollable-panel {
      overflow-y: auto;
    }
  </style>
</head>
<body>
  <!-- Main flex container that stacks elements vertically -->
  <div class="d-flex flex-column viewport-container">
    <!-- Fixed Header -->
    <header class="bg-primary text-white py-3 px-4">
      <h2>Fixed Top Header</h2>
    </header>

    <!-- Scrollable Middle Panel -->
    <main class="flex-grow-1 scrollable-panel p-4">
      <h3>Scrollable Content Area</h3>
      <!-- Add enough content to trigger scrolling -->
      <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.</p>
      <p>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>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.</p>
      <p>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>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.</p>
      <p>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>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.</p>
      <p>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>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.</p>
      <p>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>End of scrollable content</p>
    </main>

    <!-- Fixed Footer -->
    <footer class="bg-dark text-white py-3 px-4">
      <h5>Fixed Bottom Footer</h5>
    </footer>
  </div>

  <!-- Bootstrap 4 dependencies -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Key Details That Make This Work: #

• Flex Container: The outer div uses d-flex flex-column to stack its children (header, main, footer) vertically, and min-height: 100vh to ensure it takes the full height of the viewport.
• Flex Grow: The middle main element uses flex-grow-1 to consume all remaining vertical space between the header and footer—this ensures it always fills the gap, no matter how tall the header/footer are.
• Scrollable Content: Adding overflow-y: auto to the middle panel means only its inner content will scroll when it exceeds the available space, instead of making the entire page scroll.
• Reset Default Margins: We remove the default body margin to eliminate unwanted spacing at the top/bottom of the viewport.

This setup will keep your header and footer fixed in place while the middle panel stays exactly the height of the viewport minus the header/footer, with its content scrollable as needed.

内容的提问来源于stack exchange，提问作者Ivan Dubynets