div里面的可滚动div，网格布局问题答案

【问题标题】：Scrollable div inside div, grid layout problemdiv里面的可滚动div，网格布局问题
【发布时间】：2020-05-09 23:45:36
【问题描述】：

我想让某个 div 可滚动（橙色，未知高度，可能超过视口）。该页面包含一个包含 3 个子项的容器。我需要可滚动的 div 是这 3 个孩子之一的一部分。如果我将overflow: auto 设置为.con，滚动就像一个魅力。但我不需要滚动完整的.con。 .b 应该始终可见。

html, body {
  height: 100%;
}

.container {
  height: 100%;
  display: grid;
  grid-template-rows: min-content, min-content, auto;
  border: 1px solid red;
}

.sub {
  border: 1px solid blue;
}

.con {
  border: 1px solid green;
}

.a {
  background-color: yellow;
}

.b {
  background-color: orange;
  overflow: auto; /* doesn't work :( */
}

<div class="container">
  <div class="head">
    abc
  </div>
  <div class="sub">
    def<br>
    efg
  </div>
  <div class="con">
    <div class="a">
      fixed position
    </div>
    <div class="b">
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123
    </div>
  </div>
</div>

【问题讨论】：

标签： html css scroll

【解决方案1】：

html, body {
  height: 100%;
  overflow: hidden;
}

.container {
  height: 100%;
  display: grid;
  grid-template-rows: min-content, min-content, auto;
  border: 1px solid red;
}

.sub {
  border: 1px solid blue;
}

.con {
  border: 1px solid green;
}

.a {
  background-color: yellow;
}

.b {
  background-color: orange;
  overflow-y: scroll; 
  height: 500px;
}
 <div class="container">
    <div class="head">
      abc
    </div>
    <div class="sub">
      def<br>
      efg
    </div>
    <div class="con">
      <div class="a">
        fixed position
      </div>
      <div class="b">
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123
      </div>
    </div>
  </div>

【讨论】：

.b的高度未知，因为它是一个表格，我不知道它会包含多少行。
我不知道前面提到的.b 的高度。 .b 可能是 100 像素或 1000 像素，具体取决于表格内的行。
如果没有高度，则无法将滚动条添加到 .b div
但这是可能的。我找到了解决方案；）！
哦，太好了。请为我的参考提供代码 sn-p。

【解决方案2】：

在.con 上滚动并在.a 上使用position:sticky

html, body {
  height: 100%;
  margin:0;
}

.container {
  height: 100%;
  display: grid;
  grid-template-rows: min-content, min-content, auto;
  border: 1px solid red;
}

.sub {
  border: 1px solid blue;
}

.con {
  border: 1px solid green;
  overflow: auto;
}

.a {
  background-color: yellow;
  position:sticky;
  top:0;
}

.b {
  background-color: orange;
}

* {
 box-sizing:border-box;
}

<div class="container">
  <div class="head">
    abc
  </div>
  <div class="sub">
    def<br>
    efg
  </div>
  <div class="con">
    <div class="a">
      fixed position
    </div>
    <div class="b">
      start<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      end
    </div>
  </div>
</div>

【讨论】：

.b 应该始终可见。
@awdrt 定义始终可见
我的错误，我的意思是a。如果我在橙色 div 中滚动，a 应该始终可见。
@awdrt 这就是我使用位置粘性的原因。除非您使用的浏览器不支持粘性，否则它始终可见