CSS сетка с независимой прокруткой - PullRequest
Новая
       13

CSS сетка с независимой прокруткой

0 голосов
/ 16 апреля 2020

У меня есть базовый c макет, состоящий из верхней навигации, боковой навигации и контента. Содержание и боковая навигация выше страницы. Я хочу убедиться, что для всей страницы нет полосы прокрутки, но боковые элементы навигации и содержимое имеют свои независимые полосы прокрутки для просмотра содержимого. Я пробовал различные комбинации свойства переполнения 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>

Ответы [ 2 ]

1 голос
/ 16 апреля 2020

Вы можете добавить следующее 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

0 голосов
/ 16 апреля 2020

Я нашел решение, используя ответ Алессио, чтобы использовать cal c для вычисления высоты. Мне также нужно было убедиться, что боковая навигация была в оболочке, чтобы 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>
...