我想有一些弹性项目在它的头，这意味着头将有可变的高度然后，在下面，我想有一个可滚动的区域，覆盖浏览器视窗的其余部分。
我用下面的代码做了一些尝试:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/"
</head>
<body style="height:100vh;overflow:hidden">
<div>
Variable height
<hr><hr><hr><hr><hr><hr><hr>
</div>
<div style="height:100%">
object
<div style="height:100%;overflow-y:scroll">
<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>
但是，当我用较小的高度调整浏览器大小时，滚动条不会在我期望它这样做时出现:滚动条不会在较低的div部分被剪掉时出现，而是只在被剪掉的部分与标题具有相同高度时出现。这个问题出现在chrome和firefox中，所以我想我没有正确使用style。
为什么会这样?为什么标题的高度对第二个div的溢出有一些影响?是否有一种合适的方式来实现我最初的目标，可能是使用另一种方式?
<代码>
某些浏览器可能会在html和/或body元素中添加padding或margin，当您尝试使用相对于视口尺寸的百分比时，这会影响其他元素。
我总是把它们清除。
示例:
<div class="container">
<div class="header">
<div>Variable height</div>
<div>Variable height</div>
<div>Variable height</div>
<div>Variable height</div>
<div>Variable height</div>
<div>Variable height</div>
<div>Variable height</div>
<div>Variable height</div>
<div>Variable height</div>
</div>
<div class="scroll-box">
<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>