HTML 部分中的滚动条未覆盖整个高度

Question

我的 html 页面有一个奇怪的问题（请参阅下面的代码）。问题是“左侧部分”上的滚动条没有覆盖该部分的整个高度。它仅在窗口足够小以覆盖“Link 18”时显示。此时滚动条会显示，但不会滚动到“Link 18”之外（实际上只显示了一半）。

如果删除标签内的代码，问题就会消失。即，滚动条覆盖了列的整个高度。我确信我没有正确设置我的页面。请帮忙。

卡姆兰

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

Answer 1

由于您希望左右部分都可滚动，这意味着需要将
```
html, body
```
设置为
```
100dvh
```
（动态视口高度）。
使用
```
padding
```
代替锚点的边距。优点是点击面积更大
利用
```
flex
```
属性简写将元素扩展到可用空间

* { margin: 0; box-sizing: border-box; }

html, body {
  height: 80dvh;
}

body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.container {
  flex: 1;
  display: flex;
  height: 100%;
}

.left-section {
  height: 100%;
  width: 30%;
  padding: 20px;
  background-color: #f0f0f0;
  overflow: auto; 

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

.right-section {
  flex: 1;
  padding: 20px;
  background-color: #e0e0e0;
  overflow: auto;
}

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

HTML 部分中的滚动条未覆盖整个高度

问题描述投票：0回答：1

1个回答

最新问题

HTML 部分中的滚动条未覆盖整个高度

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1