On my HTML webpage, I am facing an issue with the "left-section" scrollbar. It does not cover the entire height of the section. The scrollbar only appears when the window is resized small enough to reach "Link 18". Even then, the scrollbar does not scroll beyond "Link 18"; it shows only half of it.
The problem disappears when I remove the code within the <header> tags. Once removed, the scrollbar covers the full height of the column.
<!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>