添加Header后HTML页面左侧Scrollbar无法滚动到底求助

我设计了一个多区域页面布局：顶部是Banner/Header区域，下方分为左右两个垂直主区域。左侧区域设置了滚动条，用来滚动查看所有链接。没加Header时滚动功能正常，但添加Header后，滚动条无法滚动到底部，部分内容被遮挡。我试过修改div布局、切换到grid布局，都没解决问题。

问题截图 #

• 无Header时滚动条正常：
• 添加Header后左侧内容无法完全显示：

页面代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Two Columns with Independent Scrollbars</title>
    <style>

        /* Styles for the container */
        .container {
            display: flex; /* Use Flexbox */
            height: 100vh; /* Take up all vertical space */
        }

        /* Styles for the left section */
        .left-section {
            width: 30%;
            padding: 20px;
            background-color: #f0f0f0; /* Set the background color for the left section */
            overflow-y: auto; /* Add vertical scroll if needed */
        }

        /* Styles for the right section */
        .right-section {
            width: 70%;
            padding: 20px;
            background-color: #e0e0e0; /* Set the background color for the right section */
            
        }

        /* Style for links */
        .left-section a {
            display: block; /* Each link on a new line */
            margin-bottom: 10px; /* Add spacing between links */
            text-decoration: none;
            color: blue;
        }
    </style>
</head>
<body>
  <!-- Banner Section -->
    <div class="banner">
        <h1>Welcome to My Web Page</h1>
        <p>This is the banner section of the page.</p>
    </div>
    
    <!-- if i remove the div above, the "left-section" works fine. -->
    
    <!-- Container for both sections -->
    <div class="container">
        <!-- Left Section with Independent Scrollbar -->
        <div class="left-section">
            <h3>Drawings</h3>
            <!-- Drawing Searches -->
            <a href="#" id="singleDrawing">Single CAD Entry</a>
            <a href="#" id="allRevsCAD">Single CAD Entry - All Revision</a>
            <a href="#" id="multipleDrawings">Multiple CAD Entries</a>
            <a href="#" id="trackingNumber">Tracking Number Entry</a>
            <hr>
            <a href="#" id="part">Single Part Drawings</a>
            <a href="#" id="assembly">All Drawings for a Part Assembly</a>
             <!-- Content for the right section goes here -->
            <h3>Procurement</h3>
            <a href="#" id="techPack">Tech. Package Download</a>
            
            <h3>Reports</h3>
            <a href="#" id="BOMReport">Multi-level BOM</a>
            <a href="#" id="CADStructure">CAD Structure</a>
            <a href="#" id="partHistory">Part Change History Report</a>
            <a href="#" id="MIDB">MIDB</a>
            <hr>
            <a href="#" id="shaftDetail">Shaft Detail</a>
            <a href="#" id="shaftVariations">Shaft Variations</a>
            <a href="#" id="rotorDetail">Rotor Assembly Detail</a>
            <a href="#" id="rotorVariations">Rotor Assembly Variations</a>
            <a href="#" id="shaftDetail">Shaft Detail</a>
            <a href="#" id="shaftVariations">Shaft Variations</a>
            <a href="#" id="rotorDetail">Rotor Assembly Detail</a>
            <a href="#" id="rotorVariations">Rotor Assembly Variations</a>
            <h3>Drawings</h3>
            <!-- Drawing Searches -->
            <a href="#" id="singleDrawing">Single CAD Entry</a>
            <a href="#" id="allRevsCAD">Single CAD Entry - All Revision</a>
            <a href="#" id="multipleDrawings">Multiple CAD Entries</a>
            <a href="#" id="trackingNumber">Tracking Number Entry</a>
            <hr>
            <a href="#" id="part">Single Part Drawings</a>
            <a href="#" id="assembly">All Drawings for a Part Assembly</a>
             <!-- Content for the right section goes here -->
            <h3>Procurement</h3>
            <a href="#" id="techPack">Tech. Package Download</a>
        </div>
        
        <!-- Right Section with Independent Scrollbar -->
        <div class="right-section">
           
        </div>
    </div>
</body>
</html>

问题原因 #

你的.container设置了height: 100vh，但页面顶部还有Banner区域，导致容器整体高度超出浏览器视口，底部部分被窗口截断，所以左侧滚动区域的底部内容无法被看到。

解决方法 #

推荐使用flex布局让页面自动分配空间，具体修改如下：

修改后的核心CSS #

/* 清除body默认边距，避免额外留白 */
body {
    margin: 0;
    /* 让body成为垂直方向的flex容器 */
    display: flex;
    flex-direction: column;
    /* 保证body至少占满视口高度 */
    min-height: 100vh;
}

/* 容器改为占满Banner下方的剩余垂直空间 */
.container {
    display: flex;
    flex: 1;
}

修改原理 #

• 让body成为flex容器，垂直排列Banner和主容器区域
• 给.container设置flex:1，使其自动填充Banner下方的剩余视口空间，不会超出窗口
• 左侧滚动区域的高度会适配剩余空间，滚动条可以正常滚动到底部

完整修改后代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Two Columns with Independent Scrollbars</title>
    <style>
        body {
            margin: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .container {
            display: flex;
            flex: 1;
        }

        .left-section {
            width: 30%;
            padding: 20px;
            background-color: #f0f0f0;
            overflow-y: auto;
        }

        .right-section {
            width: 70%;
            padding: 20px;
            background-color: #e0e0e0;
        }

        .left-section a {
            display: block;
            margin-bottom: 10px;
            text-decoration: none;
            color: blue;
        }
    </style>
</head>
<body>
    <div class="banner">
        <h1>Welcome to My Web Page</h1>
        <p>This is the banner section of the page.</p>
    </div>
    
    <div class="container">
        <div class="left-section">
            <h3>Drawings</h3>
            <a href="#" id="singleDrawing">Single CAD Entry</a>
            <a href="#" id="allRevsCAD">Single CAD Entry - All Revision</a>
            <a href="#" id="multipleDrawings">Multiple CAD Entries</a>
            <a href="#" id="trackingNumber">Tracking Number Entry</a>
            <hr>
            <a href="#" id="part">Single Part Drawings</a>
            <a href="#" id="assembly">All Drawings for a Part Assembly</a>
            <h3>Procurement</h3>
            <a href="#" id="techPack">Tech. Package Download</a>
            
            <h3>Reports</h3>
            <a href="#" id="BOMReport">Multi-level BOM</a>
            <a href="#" id="CADStructure">CAD Structure</a>
            <a href="#" id="partHistory">Part Change History Report</a>
            <a href="#" id="MIDB">MIDB</a>
            <hr>
            <a href="#" id="shaftDetail">Shaft Detail</a>
            <a href="#" id="shaftVariations">Shaft Variations</a>
            <a href="#" id="rotorDetail">Rotor Assembly Detail</a>
            <a href="#" id="rotorVariations">Rotor Assembly Variations</a>
            <a href="#" id="shaftDetail">Shaft Detail</a>
            <a href="#" id="shaftVariations">Shaft Variations</a>
            <a href="#" id="rotorDetail">Rotor Assembly Detail</a>
            <a href="#" id="rotorVariations">Rotor Assembly Variations</a>
            <h3>Drawings</h3>
            <a href="#" id="singleDrawing">Single CAD Entry</a>
            <a href="#" id="allRevsCAD">Single CAD Entry - All Revision</a>
            <a href="#" id="multipleDrawings">Multiple CAD Entries</a>
            <a href="#" id="trackingNumber">Tracking Number Entry</a>
            <hr>
            <a href="#" id="part">Single Part Drawings</a>
            <a href="#" id="assembly">All Drawings for a Part Assembly</a>
            <h3>Procurement</h3>
            <a href="#" id="techPack">Tech. Package Download</a>
        </div>
        
        <div class="right-section">
           
        </div>
    </div>
</body>
</html>

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