Сетка вертикальная прокрутка - PullRequest
Новая
       25

Сетка вертикальная прокрутка

0 голосов
/ 26 июня 2019

У меня есть сетка с вложенными левой и правой сетками. Я хочу, чтобы моя левая сетка занимала всю высоту браузера и была зафиксирована на месте. Я хочу, чтобы моя правая сетка получала вертикальную полосу прокрутки при добавлении в нее контента. 

body{ margin: 0 0; padding: 0 0 ; }

.grid {
  display: grid;
  grid-template-columns: 25% 75%;
  grid-gap: 10px;
  grid-auto-rows: 500px;
}

.left{
  display: grid;
  grid-template-rows : repeat(3,1fr);
  grid-gap : 5px;
  grid-auto-rows: 500px;
}

.one{ background: violet; }

.two{ background: indigo; }

.three { background: blue; }

.right{
  display: grid;
  grid-template-rows: repeat(4,1fr);
  grid-gap : 5px;
}

.four{ background: green; }

.five{ background: yellow; }

.six { background: orange; }

.seven{ background: red}
<body>
    <div class="grid">
        <div class="left">
            <div class="one">1</div>
            <div class="two">2</div>
            <div class="three">3</div>
        </div>
        <div class="right">
            <div class="four">4</div>
            <div class="five">5</div>
            <div class="six">6</div>
            <div class="seven">7</div>
        </div>
    </div>
</body>

1 Ответ

0 голосов
/ 26 июня 2019

Как вы планируете, чтобы левая сетка занимала полную высоту и оставалась фиксированной, если у вас есть grid-auto-rows: 500px?Во многих случаях это приведет к переполнению контейнера.

Вот пересмотренная версия вашего кода с фиксированной левой сеткой и grid-auto-rows: 500px с overflow: auto на правой сетке. 

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr; /* switched from percentages for spacing efficiency */
  grid-gap: 10px;
  /* grid-auto-rows: 500px; */
  height: 100vh; /* new */
}

.left {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 5px;
  /* grid-auto-rows: 500px; */
}

.right {
  display: grid;
  /* grid-template-rows: repeat(4, 1fr); */
  grid-gap: 5px;
  grid-auto-rows: 500px; /* new */
  overflow: auto; /* new */
}

.one   { background: violet; }
.two   { background: indigo; }
.three { background: blue;   }
.four  { background: green;  }
.five  { background: yellow; }
.six   { background: orange; }
.seven { background: red     }
body   { margin: 0 0; padding: 0 0; }
<div class="grid">
  <div class="left">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
  </div>
  <div class="right">
    <div class="four">4</div>
    <div class="five">5</div>
    <div class="six">6</div>
    <div class="seven">7</div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...