使用flexbox，在flexitem内的div上显示滚动条
使用flexbox，在flexitem内的div上显示滚动条
提问于 2019-01-08 22:20:09
我正在尝试使用Bootstrap flex设置我的HTML网站。我想要一个布局，其中一个内部div获得滚动条和外部div我填充页面的其余部分。
请看这个例子；
<div class="d-flex align-items-start flex-column" style="height: 100vh;">
<div style="background-color: red" class="ml-5 mr-5 p-2">Flex item 1</div>
<div style="background-color: blue" class="ml-5 mr-5 p-2">Flex item 2</div>
<div style="background-color: firebrick" class="ml-5 mr-5 p-2">Flex item 3</div>
<div style="background-color: hotpink" class="ml-5 mr-5 p-2">Flex item 4</div>
<div style="background-color: brown" class="ml-5 mr-5 p-2">Flex item 5</div>
<div style="background-color: violet" class="ml-5 mr-5 p-2">Flex item 6</div>
<div id="filler" style="background-color: magenta" class="mb-auto ml-5 mr-5 p-2 overflow-auto">
<div style="background-color: darkcyan">
<div>Flex item 7</div>
</div>
<div id="scroller" style="background-color: crimson;" class="overflow-auto">
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
</div>
</div>
<div style="background-color: green" class="ml-5 mr-5 p-2">Flex item 9</div>
现在，布局可以正常工作了，但是滚动条被附加到div“填充”上，我希望它在div "scroller“上。
我该如何解决这个问题呢？
回答 2
Stack Overflow用户
发布于 2019-01-09 15:16:06
带有id滚动条的div必须有一个高度。
增加了100px的高度和溢出:自动；内联样式
<div class="d-flex align-items-start flex-column" style="height: 100vh;">
<div style="background-color: red" class="ml-5 mr-5 p-2">Flex item 1</div>
<div style="background-color: blue" class="ml-5 mr-5 p-2">Flex item 2</div>
<div style="background-color: firebrick" class="ml-5 mr-5 p-2">Flex item 3</div>
<div style="background-color: hotpink" class="ml-5 mr-5 p-2">Flex item 4</div>
<div style="background-color: brown" class="ml-5 mr-5 p-2">Flex item 5</div>
<div style="background-color: violet" class="ml-5 mr-5 p-2">Flex item 6</div>
<div id="filler" style="background-color: magenta" class="mb-auto ml-5 mr-5 p-2 overflow-auto">
<div style="background-color: darkcyan">
<div>Flex item 7</div>
</div>
<div id="scroller" style="background-color: crimson; overflow:auto; height:100px;" class="overflow-auto">
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
</div>
</div>
<div style="background-color: green" class="ml-5 mr-5 p-2">Flex item 9</div>
</div>
Stack Overflow用户
发布于 2019-01-10 13:51:27
对于较小的设备，请尝试全屏查看，您应该编写媒体查询。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<style>
#wrap{}
#wrap > div{ height:50px;}
#scroller{}
#wrap #filler { height:calc(100% - 50px * 7)}
</style>
<body>
<div class="d-flex align-items-start flex-column" style="height: 100vh;" id="wrap">
<div style="background-color: red" class="ml-5 mr-5 p-2">Flex item 1</div>
<div style="background-color: blue" class="ml-5 mr-5 p-2">Flex item 2</div>
<div style="background-color: firebrick" class="ml-5 mr-5 p-2">Flex item 3</div>
<div style="background-color: hotpink" class="ml-5 mr-5 p-2">Flex item 4</div>
<div style="background-color: brown" class="ml-5 mr-5 p-2">Flex item 5</div>
<div style="background-color: violet" class="ml-5 mr-5 p-2">Flex item 6</div>
<div id="filler" style="background-color: magenta" class="mb-auto ml-5 mr-5 p-2">
<div style="background-color: darkcyan; height:50px;">
<div>Flex item 7</div>
</div>
<div id="scroller" style="background-color: crimson; overflow:auto; height:calc(100% - 50px);" class="overflow-auto">
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
<div>Flex item 8</div>
</div>
</div>
<div style="background-color: green" class="ml-5 mr-5 p-2">Flex item 9</div>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54093771
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号