1FR网格电池扩展了100％

我有以下网格，我想跨越屏幕的高度 - 而不是更少，而不是更多。在网格中，我有一个固定的标头（一个），一个固定的页脚（三个）和一个可滚动内容（两个）

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

您可以将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>

相关内容

最新更新

热门标签：