html - 将一个列表设置为静态，另一个列表设置为动态

Question

我在一个容器中有两个列表。我希望其中一个列表是静态的，另一个可以滚动。现在我可以让它工作一些，但是第二个列表的列表标题随列表本身一起滚动。无论我如何更改 div 之间的 overflow - scroll 或 auto 它都无法满足我的需要。

<div class="container">
    <div class="list nearby">
      <div class="header">
        <div class="title">
          <p>Nearby users</p>
        </div>
      </div>
      <div class="userlist">
        <User v-for="user in nearbyUsers" :key="user.UcpID" v-bind:user="user"/>
      </div>
    </div>

    <div class="list">
      <div class="header all">
        <div class="title">
          <p>All online users</p>
        </div>
        <div class="searchfield">
          <input type="text" placeholder="..." v-model="search">
        </div>
        <div class="search">
          <i class="fas fa-search"></i>
        </div>
      </div>
      <div class="userlist">
        <User v-for="user in users" :key="user.UcpID" v-bind:user="user"/>
      </div>
    </div>
  </div>

.container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(255, 100, 100);
  background-size: 100% 100%;
  font-family: "Roboto", sans-serif;
  border-radius: 25px;
  text-align: center;
  transition: all 0.5s ease;
  padding-top: 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}

::-webkit-scrollbar {
  width: 0px;
}

p {
  margin: 0;
}

.header {
  color: white;
  font-size: 20px;
  padding: 0 15px;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header.all {
  background: rgb(218, 71, 71);
  padding-top: 10px;
  position: sticky;
}

.header i {
  font-size: 16px;
}

.userlist {
  background: rgb(255, 249, 249);
  overflow-y: scroll;
}

.searchfield input[type="text"] {
  outline: none;
  background: transparent;
  border: none;
  text-align: right;
  color: white;
}

.list {
  overflow-y: auto;
}

.list.nearby {
  min-height: fit-content;
}

https://jsfiddle.net/introzen/erhav0nz/4/

是否也可以为 .list.nearby 设置 min-height 和 max-height 并将其扩展到 5在激活滚动之前列出元素？

Answer 1

有很多变化 - 您可以修改您的列 flexbox:

• 您可以在滚动列表时使用 position: sticky 固定标题，

• 使每个列表成为一个 column flexbox 并将 flex: 1 添加到第二个列表，以便它扩展到可用的剩余空间，

• 将 min-height: 0 添加到第二个列表以重置列 flexbox 的默认 min-height: auto，

• 将 max-height 添加到您的第一个列表以将其限制为对应于 5 个元素的高度(我没有看到任何其他方法可以做到这一点)，

• 添加 box-sizing: border-box 以在 height 中包含 padding；还将 body 边距重置为零，

body {
  margin: 0; /* added */
}

* {
  box-sizing: border-box; /* added */
}

.container {
  position: absolute;
  width: 350px;
  height: 100%;
  background: rgb(255, 100, 100);
  background-size: 100% 100%;
  font-family: "Roboto", sans-serif;
  border-radius: 25px;
  text-align: center;
  transition: all 0.5s ease;
  padding-top: 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}

::-webkit-scrollbar {
  width: 0px;
}

p {
  margin: 0;
}

.header {
  color: white;
  font-size: 20px;
  padding: 0 15px;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky; /* added */
  top: 0; /* activate stickiness */
}

.header.all {
  background: rgb(218, 71, 71);
  padding-top: 10px;
}

.header i {
  font-size: 16px;
}

.userlist {
  background: rgb(255, 249, 249);
  overflow-y: scroll;
}

.searchfield input[type="text"] {
  outline: none;
  background: transparent;
  border: none;
  text-align: right;
  color: white;
}

.list {
  /*overflow-y: auto;*/
  min-height: 0; /* added */
  display: flex; /* added */
  flex-direction: column; /* added */
  flex: 1; /* expand to fill remaining space */
}

.list.nearby {
  min-height:auto; /* changed */
  flex: 0; /* reset flex: 1 applied on list */
  max-height: 200px; /* beyond which scroll should happen */
}

<div data-v-68be103e="" class="container">
  <div data-v-68be103e="" class="list nearby">
    <div data-v-68be103e="" class="header">
      <div data-v-68be103e="" class="title">
        <p data-v-68be103e="">Nearby users</p>
      </div>
    </div>
    <div data-v-68be103e="" class="userlist">
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">introzen</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">TYLAR5</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">introzan</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
    </div>
  </div>
  <div data-v-68be103e="" class="list">
    <div data-v-68be103e="" class="header all">
      <div data-v-68be103e="" class="title">
        <p data-v-68be103e="">All online users</p>
      </div>
      <div data-v-68be103e="" class="searchfield"><input data-v-68be103e="" type="text" placeholder="..."></div>
      <div data-v-68be103e="" class="search"><i data-v-68be103e="" class="fas fa-search"></i></div>
    </div>
    <div data-v-68be103e="" class="userlist">
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">introzen</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">TYLAR5</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">introzan</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">Rodneynoubs</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">frandunc</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">Karinstoxy</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">AlexisHal</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">HSKFairmietungDyeta</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">JeremyMew</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">Robertgog</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">RodneyLig</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">root</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">Davidfah</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">Cathyneb</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">Nekitbka</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">Bobjex</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">Melvinloazy</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">BruceQuogy</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">Taghusod</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">zelebyaka</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">ultrasalvog</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
      <div data-v-033c17a2="" data-v-68be103e="" class="user">
        <div data-v-033c17a2="" class="userinfo">
          <p data-v-033c17a2="" class="name">Bennierak</p>
          <p data-v-033c17a2="" class="char">as </p>
        </div>
        <div data-v-033c17a2="" class="userdetails"><i data-v-033c17a2="" class="fas fa-chevron-right"></i></div>
      </div>
    </div>
  </div>
</div>