网格垂直滚动答案

【问题标题】：Grid Vertical Scrolling网格垂直滚动
【发布时间】：2019-11-08 10:20:37
【问题描述】：

我有一个嵌套左右网格的网格。我希望我的左网格占据浏览器的全部高度并固定到位。我希望我的右侧网格在向其添加内容时获得一个垂直滚动条。

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>

【问题讨论】：

标签： css frontend css-grid vertical-scrolling

【解决方案1】：

如果您有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>

【讨论】：

感谢您的帮助。我刚刚进行了您建议的更改，但它在右侧添加了一个额外的滚动条。我只想要 right 的默认浏览器滚动条。当我减小窗口左网格的大小时，也会滚动。这是我的更改链接codepen.io/akash6019/pen/QXMZvY
你用的是什么浏览器？您在评论中描述的任何内容都不会出现在您的代码笔中。我正在 Chrome 和 FF 中进行测试。
当我使用 grid-template-rows: repeat(3,1fr);在左网格中，它使左网格滚动。我想要一个滚动条，它是我右侧网格的默认浏览器。请重新检查链接。我正在使用 chome 。
左侧网格中也有一张头像。这就是为什么您没有看到任何变化。
第二个滚动条出现是因为左侧网格中内容的大小。您要么必须允许内容缩小到 0，要么允许它溢出。这是您的代码笔，左侧网格上有overflow: hidden：codepen.io/anon/pen/jjGwvr