我想使用 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 關注
- 107 瀏覽
添加回答
舉報
0/150
提交
取消