添加标题后，HTML 页面中的滚动条无法正常工作

Question

我有一个包含多个部分（div）的页面布局。有一个横幅，然后有两个主要的垂直部分。左侧部分有一个滚动条，因此用户可以向下滚动以查看所有链接。只要我没有横幅/标题部分，这就可以正常工作。当我添加标题时，滚动条不会一直向下（或者不会从最后一项开始，而是仅在已经覆盖了几个项目之后）。有人可以帮我解决这个奇怪的问题吗？

/* 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;
}

<!-- 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>

我尝试了很多不同的方法，更改 div 布局，更改为 gridlayout，在每种情况下我都得到相同的结果。当我没有标题时，滚动条工作正常，但一旦添加标题，它就达不到整个左侧部分。

Answer 1

尝试这样的事情：

.banner {
    height: 20vh;
}

.container {
    display: flex; 
    height: 80vh;
}

Answer 2

实际上确实如此，当我滚动到左侧部分的末尾时，即使您有横幅部分，我也会看到最后一个元素。要查看它，您只需在鼠标位于左侧区域时滚动即可。