CSS Flex 溢出
我想使用 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）时：
现在项目列表溢出到屏幕底部下方。（看到滚动条底部的箭头不见了）
任何帮助，将不胜感激。
qq_笑_171回答
-
慕容3067478
您的代码中有几个固定长度，包括：.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 演示
随时随地看视频慕课网APP
相关分类
Html5