CSS：为什么滚动条出现时菜单边框没有出现？
米莎·莫罗什科（Misha Moroshko）
考虑以下菜单示例：（请注意红色边框）
<div class="menu-wrapper">
<div class="menu-item">Hello</div>
<div class="menu-item">Stack</div>
<div class="menu-item">Overflow</div>
</div>
.menu-wrapper {
display: flex;
flex-direction: column;
width: 200px;
background-color: #ccc;
border-left: 5px solid #bbb;
height: 300px;
}
.menu-item {
padding: 20px;
cursor: pointer;
}
.menu-item:hover {
margin-left: -5px;
background-color: #444;
color: #fff;
border-left: 5px solid red;
}
现在，假设的高度menu-wrapper很小，我们希望出现垂直滚动条。例如，我们可以替换为：
height: 300px;
与：
height: 100px;
overflow-y: auto;
但是，红色边框消失了：
这是为什么？您将如何解决？
西里尔
由于溢出会隐藏溢出的内容，因此您可以在背景上绘制边框或带有内嵌阴影，因此将其绘制在cntainer的整个高度上：DEMO
.menu-wrapper {
display: flex;
flex-direction: column;
width: 200px;
background-color: #ccc;
box-shadow: inset 5px 0 #bbb;/* here draws an inside left border via shadow */
height: 300px;
height: 100px;
overflow:auto;
}
.menu-item {
padding: 20px;
cursor: pointer;
}
.menu-item:hover {
background-color: #444;
color: #fff;
border-left: 5px solid red;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
为什么我的滚动框没有出现在滚动条的顶部？
- 2
为什么滚动条即使向左突出也没有出现？
- 3
当我的div不在体外时，为什么没有滚动条出现？
- 4
为什么滚动条没有出现在弹出窗口内？
- 5
GWT 滚动条没有出现
- 6
滚动条没有出现
- 7
滚动条出现在 Chrome 中，但没有什么可滚动的
- 8
当元素在顶部边框上溢出时，为什么没有滚动条？
- 9
为什么在该div中出现滚动条？
- 10
空滚动条出现，没有溢出
- 11
CSS Bootstrap：出现水平滚动条
- 12
如何仅使菜单出现在滚动条上？
- 13
如何仅使菜单出现在滚动条上？
- 14
滚动条最近出现了
- 15
滚动条无故出现
- 16
滚动条无故出现
- 17
为什么边框会添加滚动条（溢出）？
- 18
为什么我的ScrollViewer滚动条不出现在屏幕上？
- 19
为什么jQuery removeClass重新出现在滚动条上？
- 20
为什么我的ScrollViewer滚动条不出现在屏幕上？
- 21
当滚动条出现时如何停止Bootstrap 3.1.1从左移内容？
- 22
滚动条出现时jQuery窗口大小调整问题
- 23
滚动条出现时如何自动增加元素的宽度？
- 24
为什么即使没有应用边框底部也会出现？
- 25
垂直滚动条没有出现在IE11中
- 26
通过addSubview向NSScrollView添加自定义视图时，没有滚动条出现
- 27
如何忽略小屏幕右侧的图像宽度，以使底部没有滚动条出现？
- 28
水平滚动条没有出现在TextBox上
- 29
CSS-是什么导致此水平滚动条的出现？
我来说两句