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，这是您定义的导航高度。

以下是有效的Codepen：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网格布局

2 个答案: