CSS网格的动态高度

Question

我有一个3行的列，它们都有一个动态高度。我想要的是第一排有最小高度，第二排占据自由空间，第三排也有最小高度。

这是我能做到的，问题是我不想让中间行把第三行推下去。基本上，我希望第二行占据所有的空间，并有一个卷轴。

按照我的示例，当我添加一些li元素时，就会出现问题。

​

* {
  box-sizing: border-box;
}

body {
  overflow-y: hidden;
  height: 100vh;
}

.grid {
  display: grid;
  grid-template-rows: min-content 1fr min-content;
  height: 100%
}

ul {
  list-style: none;
  overflow-y: auto;
  height: 70%;
}

li {
  margin: 5px;
  background-color: red;
}

.s-1 {
  background-color: green;
  min-height: 100px;
}

.s-3 {
  background-color: blue;
  min-height: 100px;
}

<section class="grid">
  <div class="s-1">Section 1</div>

  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>

    </ul>
  </div>

  <div class="s-3">Section 3</div>
</section>

​

​

​

​

​

Answer 1

​

.row1 {
  height: 50px;
  width: 100%;
  background: red;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 2
}
.row2 {
  height: 100vh;
  background: green;
  position: relative;
  z-index: 1;
}
.row3 {
  height: 50px;
  background: orange;
  position: fixed;
  bottom: 0px;
  left: 0px;
  z-index: 2;
  width: 100%;
}

<div class="row1"></div>
<div class="row2">
fsdfsdfsdfsdf <br/>
fsdfsdfsdfsdf <br/>
fsdfsdfsdfsdf <br/>
fsdfsdfsdfsdf <br/>
fsdfsdfsdfsdf <br/>
fsdfsdfsdfsdf <br/>
fsdfsdfsdfsdf <br/>
fsdfsdfsdfsdf <br/>
fsdfsdfsdfsdf <br/>
fsdfsdfsdfsdf <br/>
fsdfsdfsdfsdf <br/>
fsdfsdfsdfsdf <br/>
fsdfsdfsdfsdf <br/>
</div>
<div class="row3"></div>

​

也许这就是你要找的？

Answer 2

使用网格- grid-template-rows: 100px calc(100% - 200px) 100px;

当我使用calc时，我设置了我想要的高度，100%的页面减去顶部和底部。

在代码笔：(https://codepen.io/omergal/pen/dybpOJr)中，我们看不到卷轴，因为它位于顶部和底部之间

​

* {
  box-sizing: border-box;
}

body {
  overflow-y: hidden;
  height: 100vh;
  margin: 0;
}

.grid {
  display: grid;
  grid-template-rows: 100px calc(100% - 200px) 100px;
  height: 100%;
}

ul {
  list-style: none;
  overflow-y: auto;
  height: 100%;
  margin:0;
  padding:0;
}

li {
  margin: 5px;
  background-color: red;
}

.s-1 {
  background-color: green;
  height: 100%;
}

.s-3 {
  background-color: blue;
  height: 100%;
}

<section class="grid">
  <div class="s-1">Section 1</div>

  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>

    </ul>
  </div>

  <div class="s-3">Section 3</div>
</section>

​