允许下拉元素溢出具有隐藏或滚动溢出的容器 [英] Allow a drop-down element to overflow a container that has hidden or scrolled overflow
本文介绍了允许下拉元素溢出具有隐藏或滚动溢出的容器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个可水平滚动的容器，并在其中打开了下拉菜单(位置:绝对).我希望打开的下拉列表在此容器中垂直溢出. y:溢出-无效，容器仍可垂直滚动.
I have horizontally scrollable container and opened dropdown inside (position: absolute). I want the opened dropdown to overflow vertically this container. Overflow-y: visible doesn't work and container is scrollable vertically anyway.
以下是简化示例: http://jsfiddle.net/matcygan/4rbvewn8/7/
HTML
<div class="container">
<div>
<div class="dd-toggle">Dropdown toggle
<div class="dd-list">Opened drop down list</div>
</div>
</div>
</div>
CSS
.container {
width: 200px;
overflow-x: scroll;
overflow-y: visible;
}
.container >div {
width: 300px;
}
.dd-toggle {
position: relative;
background: grey;
line-height: 40px;
}
.dd-list {
position: absolute;
top: 90%;
background: #ff9c00;
width: 70px;
}
推荐答案
可以完成，但需要三级控制:
It can be done, but requires three levels of control:
- 存在外部容器以建立相对位置.
- 它的内容容器控制着大小和溢出.
- 下拉容器对光标做出反应.
为此:
尝试一下:
<!DOCTYPE html>
<html>
<head>
<title>Popout Test</title>
<meta charset="UTF-8" />
<style>
.container {
position: relative;
}
.content {
width: 10em;
max-height: 5em;
overflow: scroll;
}
.dropdown {
position: absolute;
background-color: #CCC;
overflow: visible;
display: none;
}
:hover>.dropdown {
display: block;
}
</style>
</head>
<body>
<h1>Popout Test</h1>
<div class="container">
<ol class="content">
<li>Alpha</li>
<li>Bravo</li>
<li>Charlie >
<ul class="dropdown">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
</li>
<li>Delta</li>
<li>Echo</li>
<li>Foxtrot</li>
<li>Golf</li>
</ol>
</div>
</body>
</html>
这篇关于允许下拉元素溢出具有隐藏或滚动溢出的容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
