我想有一些灵活的项目在它的标题，这意味着标题将有可变的高度，然后，在下面，我想有一个可滚动的区域，涵盖了浏览器视口的其余部分。
我尝试使用以下代码：
<!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中都会出现，所以我想我没有正确使用样式。
为什么会这样？为什么头的高度对第二个div的溢出有一定的影响？有没有一个合适的方法来实现我最初的目标，可能使用另一种方法？
1条答案
按热度按时间iszxjhcz1#
有些浏览器可能会在html和/或body元素中放置填充或边距，当您尝试使用相对于视口尺寸的百分比时，这会影响其他元素。
我总是把它们清理出去。
样品：
第一个