我想使用 bootstrap + css 的 flexbox 制作一个带有列表的网站，其中项目列表的高度应达到屏幕底部而不溢出。我能够得到这样的工作解决方案：html,body { width: 100%; height: 100%; overflow: hidden; margin: 0;}body { background-color: black;}.wrapper .content-wrapper .content { flex: 1 1 1px;}.wrapper .content-wrapper .content { display: flex; flex-direction: column;}.wrapper .content-wrapper { width: 100%;}.wrapper { display: flex; height: 100%;}.side { background-color: blue; display: flex; flex-direction: column; width: 224px;}.content-wrapper { display: flex; flex-direction: column;}.topbar { height: 100px; background-color: aqua;}.main { flex: 1 1 1px; background-color: pink; overflow-y: scroll;}.item { background-color: white; border-style: solid; height: 200px;}<html><head> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /></head><body> <div class="wrapper"> <div class="side"></div> <div class="content-wrapper"> <div class="content"> <div class="topbar"></div> <div class="main"> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> </div> </div> </div> </div></body></html>在此链接的帮助下： Prevent Flex item from Exceeded Parent Height and make Scroll Bar work正如您所看到的，滚动条的底部箭头位于屏幕的末尾。（预期行为）但是，当我尝试将主 div 扩展为另外 2 列（使用 bootstrap + flex）时：现在项目列表溢出到屏幕底部下方。（看到滚动条底部的箭头不见了）任何帮助，将不胜感激。
1 回答
慕容3067478
TA贡献1773条经验 获得超3个赞
您的代码中有几个固定长度，包括：
.side {
width: 224px;
}
.topbar {
height: 100px;
}
这些硬限制使得溢出问题的解决方案相对简单，因为触发滚动条的最简单方法是创建溢出条件，最好使用固定长度来实现。
在本例中，.topbar { height: 100px }是同级元素上滚动条的键。
（请注意，您需要禁用flex-shrink这些长度才能始终遵守这些值。）
这是代码的修订版本，进行了各种调整以提高性能和效率。
body {
margin: 0;
background-color: black;
}
.wrapper {
display: flex;
height: 100vh;
}
.side {
/* width: 224px; */ /* will not be respected without adding `flex-shrink: 0` */
flex: 0 0 224px; /* new; flex-grow, flex-shrink, flex-basis */
background-color: blue;
display: flex;
flex-direction: column;
}
.content-wrapper {
flex: 1; /* consume remaining space */
display: flex;
flex-direction: column;
}
.wrapper .content-wrapper .content {
display: flex;
flex-direction: column;
}
.topbar {
flex: 0 0 100px;
/* height: 100px; */
background-color: aqua;
}
.main {
height: calc(100vh - 100px); /* new; sets overflow condition */
background-color: pink;
display: flex;
}
.header {
background-color: yellow;
overflow-y: scroll;
/* height: 100%; */
}
.details {
background-color: crimson;
}
.item {
background-color: white;
border-style: solid;
height: 200px; /* not a flex item, so no need to disable flex-shrink */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="side"></div>
<div class="content-wrapper">
<div class="content">
<div class="topbar"></div>
<div class="main">
<div class="header col-lg-4">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<div class="details col-lg-8"></div>
</div>
</div>
</div>
</div>
jsFiddle 演示
- 1 回答
- 0 关注
- 72 浏览
添加回答
举报
0/150
提交
取消