Question

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

Azure REST API

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}

Answer 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>

网格垂直滚动

1 个答案: