HTML/CSS 滚动高度问题

Question

考虑一下：

<!DOCTYPE html>
<html>
<style>
    .container{position: fixed; width: 100%;height: 100%; left: 0; top: 0; z-index: 10;background-color: grey}
    .header{height: 50px; width:100%;padding:10px;background-color: lightgrey;}
    .nav{height: 50px; width:100%;padding:10px; background-color: darkgrey}
    .content{height: 100%; width:100%; overflow-y: scroll}
    .item{padding:20px;}
    body {font-size: 32px; font-family: Arial, Helvetica, sans-serif;}
</style>
<body>
    <div class='container'>
        <div class='header'>this is the header</div>
        <div class='nav'>This is the nav</div>
        <div class='content'>
           <div class='item'>I love chips 1</div>
           <div class='item'>I love chips 2</div>
           <div class='item'>I love chips 3</div>
           <div class='item'>I love chips 4</div>
           <div class='item'>I love chips 5</div>
           <div class='item'>I love chips 6</div>
           <div class='item'>I love chips 7</div>
           <div class='item'>I love chips 8</div>
           <div class='item'>I love chips 9</div>
           <div class='item'>I love chips 10</div>
           <div class='item'>I love chips 11</div>
           <div class='item'>I love chips 12</div>
           <div class='item'>I love chips 13</div>
           <div class='item'>I love chips 14</div>
           <div class='item'>I love chips 15</div>
        </div>
     </div>
</body>
</html>

内容 div 的高度为 100%，容器也是如此。但是 'content' div 中的内容不允许我一直滚动到底部。它似乎偏移了 'header' 和 'nav' 高度，但它隐藏在屏幕底部。我找到了一个解决方法，我给 'content' div 一些 'padding-bottom' 来将内容推回去，但是滚动条现在从浏览器底部消失了:(

如何让 'content' div 有 100% 的高度（我不能使用固定高度，因为整个东西需要填充浏览器的宽度和高度）并确保可以看到滚动条和内容？

提前致谢！

Answer 1

所以经过大量测试和环顾四周，我自己找到了答案！任何想解决相同问题的人都可以使用以下方法解决。

使用 SASS 或 CSS 变量设置滚动容器上方所有元素的高度。使用 calc 将这些高度的总和加在一起。然后使用这个总数和计算，从视口高度的 100% 中减去该数量。像下面的东西

--header-hold-height: 64px;
--tab-hold-height: 56px;
--filter-hold-height: 64px;
--total-top-nav-height: calc(var(--header-hold-height) +  var(--tab-hold-height) + var(--filter-hold-height));

.scroll-container {
  height: calc(100vh - var(--total-top-nav-height));
  overflow-x: hidden;
  position: relative;
  overflow-y: scroll;
}

Answer 2

您可以尝试使用容器高度=100vh，而不是 100%。 enter link description here

HTML/CSS 滚动高度问题

HTML/CSS Scrolling Height Issue

html

css

scrollbar

scrollpane