顶部可变高度Header下，底部滚动区域滚动条异常问题及实现方案

问题原因 #

你当前代码的核心问题是底部容器的高度计算逻辑错误：

• body设置了height:100vh，底部div用height:100%会直接继承这个100vh的高度，但顶部还有一个可变高度的header，导致底部div的实际高度加上header高度远超视口。
• 由于body设置了overflow:hidden，底部div的内容需要被裁剪掉等于header高度的部分后，才会触发自身的滚动条（因为底部div本身高度是100vh，只有内容超过100vh时才会滚动），这就出现了你看到的“仅当裁剪部分等于Header高度时才显示滚动条”的现象。

正确实现方式 #

使用Flex布局可以完美解决这个问题，它能自动让底部区域占据视口剩余空间，无需手动计算高度：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <base href="/">
</head>
<body style="height:100vh; overflow:hidden; display:flex; flex-direction:column; margin:0;">
    <!-- 可变高度Header -->
    <div>
      Variable height
      <hr><hr><hr><hr><hr><hr><hr>
    </div>

    <!-- 占据剩余空间的滚动容器 -->
    <div style="flex:1; overflow:hidden;">
      object
      <div style="height:100%; overflow-y:auto;">
        <ul>
          <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li>
          <li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li>
          <li>16</li><li>17</li><li>18</li><li>19</li><li>20</li>
        </ul>
      </div>
    </div>
</body>
</html>

关键样式说明：

• body设置为display:flex; flex-direction:column，让子元素垂直排列；height:100vh确保body占满视口。
• 顶部Header不设置固定高度，自动适应内容高度。
• 底部容器添加flex:1，这会让它自动占据body中除Header外的所有剩余空间。
• 底部容器设置overflow:hidden，内部滚动div设置height:100%; overflow-y:auto，当内容超过剩余空间高度时，自动显示垂直滚动条。

内容的提问来源于stack exchange，提问作者F.Peltier