我在一个容器中有两个列表。我希望其中一个列表是静态的,另一个可以滚动。现在我可以让它工作一些,但是第二个列表的列表标题随列表本身一起滚动。无论我如何更改 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在激活滚动之前列出元素?
最佳答案
有很多变化 - 您可以修改您的列 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>
关于html - 将一个列表设置为静态,另一个列表设置为动态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55705790/