Question

我有一个下面的网格，我想跨越它恰好适合屏幕的高度-不小于，不大于。在网格中，我有一个固定的页眉（一个），一个固定的页脚（三个）和一个可滚动的内容（两个）

.grid-container {
    display: grid;
    grid-template-areas:
        "one"
        "two"
        "three"
        ;
    grid-template-rows: 33px 1fr 34px;
    height: 100vh;
}

发生的事情是，如果two中的内容太大，则整个网格的高度现在会大于视口。结果，我的页脚被下推，而我想滚动内容并将页脚保持在原处。

我知道我可以用position: fixed来实现自己的目标，但这是一个更复杂的网格的精简示例。感谢您提供任何帮助，我尽可能地保留网格方法。为了方便您，我整理了一个小提琴。谢谢！

https://jsfiddle.net/x6stfc01/1/

HTML为了您的方便

<div class="grid-container">
  <div class="one"></div>
  <div class="two">
    Start of Content
    <div style="height: 5000px"></div>
    End of Content
  </div>
  <div class="three"></div>
</div>

Answer 1

您可以将overflow-y: scroll添加到two项或overflow-y: auto（甚至更好）

body {
  margin: 0;
}

.grid-container {
  display: grid;
  grid-template-areas: "one" "two" "three";
  grid-template-rows: 33px 1fr 34px;
  height: 100vh;
}

.one {
  grid-area: one;
  background-color: blue;
}

.two {
  grid-area: two;
  background-color: yellow;
  overflow-y: scroll;
}

.three {
  grid-area: three;
  background-color: red;
}

<html>

<head>
</head>

<body>
  <div class="grid-container">
    <div class="one"></div>
    <div class="two">
      Start of Content
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>      End of Content
    </div>
    <div class="three"></div>
  </div>
</body>

</html>

1fr网格单元扩展到100％以上

1 个答案: