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

Scrollbars in HTML Section Don't Cover the Entire Height

I have a strange issue with my html page (see code below). The problem is that the scrollbar on the "left-section" does not cover the entire height of the section. It only shows when the window is made small enogh to cover "Link 18". At that point the scrollbar shows up, but does not scroll beyond "Link 18" (in fact shows only half of it).

The problem goes away if I remove the code within the <header> tags. I.e., the scorllbar covers the entire height of the column. I’m sure I am not setting up my page correctly. Please help.

  • Kamran
<!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;
            height: 100vh;
        }

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

        /* Styles for the right section */
        .right-section {
            width: 100%;
            padding: 20px;
            background-color: #e0e0e0;
            overflow-y: auto;
        }

        /* Style for links */
        .left-section a {
            display: block;
            margin-bottom: 10px;
            text-decoration: none;
            color: blue;
        }

        /* Hide the main page scrollbar */
        body {
            overflow: hidden;
        }
    </style>
</head>


    
<body>
   <header>
        <h1>Welcome to My Web Page Welcome to My Web Page Welcome to My Web Page Welcome to My Web Page </h1>
        <p>This is the banner section of the page.</p>
    </header>
    
    
    <!-- Banner Section -->

    <!-- Container for both sections -->
    <div class="container">
        <!-- Left Section with Independent Scrollbar -->
        <div class="left-section">
            <h3>Links</h3>
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
            <a href="#">Link 4</a>
            <a href="#">Link 5</a>
            <a href="#">Link 6</a>
            <a href="#">Link 7</a>
            <a href="#">Link 8</a>
            <a href="#">Link 9</a>
            <a href="#">Link 10</a>
            <a href="#">Link 11</a>
            <a href="#">Link 12</a>
            <a href="#">Link 13</a>
            <a href="#">Link 14</a>
            <a href="#">Link 15</a>
            <a href="#">Link 16</a>
            <a href="#">Link 17</a>
            <a href="#">Link 18</a>
            <a href="#">Link 19</a>
            <a href="#">Link 20</a>
        </div>
        
        <!-- Right Section with Independent Scrollbar -->
        <div class="right-section">
            <!-- Content for the right section goes here -->
        </div>
    </div>
</body>
</html>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I found the answer. I had to subtract the height of the from the bottom divs.

    height: calc(100vh - 80px);


  2. 0
    • Since you want both left and right sections to be scrollable, that means that html, body need to be set to 100dvh (dynamic viewport height)
    • body also needs to be display: flex; set to direction column (and does not necessarily need to be set to overflow: hidden but does not hurts)
    • Use padding instead of margin for your anchors. One plus is that the tap area is larger
    • Make use of flex property shorthand to expand an element to the available space
    • .container also needs to have overflow other than visible
    /* QuickReset */ * { margin: 0; box-sizing: border-box; }

html, body {
  height: 100dvh;
}

body {
  overflow: hidden; /* not necessarily needed */
  display: flex;
  flex-direction: column;
}

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

.left-section {
  flex: 0 0 30%;
  padding: 1rem;
  overflow: auto; 
  height: 100%;

  & a {
    display: block;
    padding: 0.5rem 0;
    text-decoration: none;
    color: blue;
  }

}
.right-section {
  flex: 1;
  padding: 1rem;
  background-color: #e0e0e0;
  overflow: auto;
  height: 100%;
}
    <header>
  <h1>Welcome</h1>
  <p>This is the banner section of the page.</p>
</header>
<div class="container">
  <div class="left-section">
    <h3>Links</h3>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
    <a href="#">Link 6</a>
    <a href="#">Link 7</a>
    <a href="#">Link 8</a>
    <a href="#">Link 9</a>
    <a href="#">Link 10</a>
    <a href="#">Link 11</a>
    <a href="#">Link 12</a>
    <a href="#">Link 13</a>
    <a href="#">Link 14</a>
    <a href="#">Link 15</a>
    <a href="#">Link 16</a>
    <a href="#">Link 17</a>
    <a href="#">Link 18</a>
    <a href="#">Link 19</a>
    <a href="#">Link 20</a>
  </div>
  <div class="right-section">
    <p style="height: 200vh;">Some test paragraph really tall...</p>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    You have to set the .left-section height. like 76vh or using ‘px’.

    .left-section {
        width: 30%;
        padding: 20px;
        background-color: #f0f0f0;
        overflow-y: auto;
        height: 76vh;
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search