CSS 带有独立滚动框的网格布局

Question

我有一个基本布局，包括顶部导航、侧面导航和内容。内容和侧边导航都比页面高。我想确保整个页面没有滚动条，但侧导航和内容 div 都有自己独立的滚动条来查看内容。我尝试了 CSS 溢出属性的各种组合，但无法正常工作。注意导航上的 position: relative; 以确保它的阴影位于侧导航的顶部。

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .box-shadow-z1 {
        box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
          0px 1px 3px 0px rgba(0, 0, 0, 0.12);
      }
      .box-shadow-z3 {
        box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14),
          0px 1px 8px 0px rgba(0, 0, 0, 0.12);
      }
      body {
        margin: 0;
        padding: 0;
        background-color: rgb(197, 197, 197);
        display: grid;
        grid-template-columns: 300px auto;
        grid-template-rows: auto;
        grid-template-areas:
          "nav nav"
          "side-nav content";
      }
      nav {
        grid-area: nav;
        background-color: white;
        position: relative; /* this is to ensure the shadow is on top */
        width: 100%;
        height: 200px;
      }
      #side-nav {
        grid-area: side-nav;
        background-color: white;
        height: 1000px;
      }
      #content {
        grid-area: content;
        padding: 20px;
      }
      #actual-content {
        background-color: white;
        height: 2000px;
      }
    </style>
  </head>
  <body>
    <nav class="box-shadow-z3"></nav>
    <div id="side-nav" class="box-shadow-z1">side nav</div>
    <div id="content"><div id="actual-content" class="box-shadow-z1">content</div></div>
  </body>
</html>

Answer 1

您可以添加以下内容CSS：

body {
   height: 100vh;
}

#side-nav,
#content {
   max-height: calc(100vh - 200px);
   overflow-y: scroll;
}

使用高度概念来实现：您使用 100vh 获得 100% 的高度，然后减去 200px，这是您定义的导航高度。

这是一个可用的代码笔：https://codepen.io/alezuc/pen/MWaKMbE

Answer 2

我通过使用 Alessio 的答案找到了使用 calc 计算高度的解决方案。我还需要确保侧导航位于包装器中，以便 overflow-y: scroll; 可以应用于内容。这是一个完整的工作示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .box-shadow-z1 {
        box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
          0px 1px 3px 0px rgba(0, 0, 0, 0.12);
      }
      .box-shadow-z3 {
        box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14),
          0px 1px 8px 0px rgba(0, 0, 0, 0.12);
      }
      body {
        margin: 0;
        padding: 0;
        background-color: rgb(197, 197, 197);
        display: grid;
        grid-template-columns: 300px auto;
        grid-template-rows: 100px calc(100vh - 100px);
        grid-template-areas:
          "nav nav"
          "side-nav content";
      }
      nav {
        grid-area: nav;
        background-color: white;
        position: relative; /* this is to ensure the shadow is on top */
        width: 100%;
      }
      #side-nav {
        grid-area: side-nav;
        background-color: white;
        overflow-y: scroll;
      }
      #side-nav-content {
        height: 10000px;
      }
      #content {
        grid-area: content;
        padding: 20px;
        overflow-y: scroll;
      }
      #actual-content {
        background-color: white;
        height: 2000px;
      }
    </style>
  </head>
  <body>
    <nav class="box-shadow-z3"></nav>
    <div id="side-nav" class="box-shadow-z1"><div id="side-nav-content">side nav</div></div>
    <div id="content"><div id="actual-content" class="box-shadow-z1">content</div></div>
  </body>
</html>

CSS 带有独立滚动框的网格布局

CSS grid layout with independent scrolling boxes

html

css

scrollbar