HTML左侧区域（left-section）滚动条无法覆盖全部高度问题求助

问题原因 #

你的.container设置了height: 100vh，但页面顶部存在<header>元素，导致.container的高度加上header的高度总和超过视口高度。而body设置了overflow: hidden，使得.container底部的内容被视口截断，因此左侧栏的滚动条无法滚动到最底部。

解决方案 #

改用Flex布局让页面自动分配空间，让.container占据header之外的剩余视口高度：

1. 修改body样式，使其成为垂直方向的Flex容器并清除默认边距
2. 将.container的height: 100vh替换为flex: 1，让它自动填充剩余空间

修改后的完整代码 #

<!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样式，设置为垂直flex容器 */
        body {
            margin: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* Styles for the container */
        .container {
            display: flex;
            flex: 1; /* 占据header之外的剩余空间 */
        }

        /* Styles for the left section */
        .left-section {
            width: 30%;
            padding: 20px;
            background-color: #f0f0f0;
            overflow-y: auto; /* 为左侧栏添加垂直滚动条 */
        }

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

    <!-- 双栏容器 -->
    <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">
            <!-- 右侧栏内容 -->
        </div>
    </div>
</body>
</html>

原理说明 #

• body设置为flex-direction: column后，子元素（header和.container）会垂直排列
• flex:1让.container自动填充header占用空间之外的全部剩余视口高度，避免超出视口
• 清除body默认的margin，防止出现不必要的间距导致布局偏移

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