Question 265176 in Html Question posted in
Some basic documentation can be found here.

Scrollbar in HTML page not working well when a header is added

I have a page layout with multiple sections (divs). There is a banner and then there are two main vertical sections. The left section has a scrollbar so the user can scroll down to see all the links. This works fine as long as I don’t have the banner/header part. When I add the header, the scrollbar does not go down all the way (or does not start right from the last item, but only after a couple of the items are already covered). Can someone please help me with this peculiar problem?without the header, scrollbar works fine with the header, scollbar does not show all items in the left-section

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

I tried a lot of different things, change the div layout, change to gridlayout, I get the same result in every case. When I don’t have the header, the scrollbar works fine, but as soon as I add the header, it falls short of the entire left section.

Tags:

2

Answers


  1. 0

    Try something like this :

    .banner {
    height: 20vh;
}

.container {
    display: flex; 
    height: 80vh;
}
    Login or Signup to reply.
  2. 0

    Actually it does, I see last element when I scroll to the end of left part even you have banner section. To see it, you just need to scroll while your mouse is on left area.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search