Question

我有水平可滚动的容器并且在里面打开了下拉列表（位置：绝对值）。我希望打开的下拉列表垂直溢出这个容器。溢出-y：可见无效，容器无论如何都可以垂直滚动。

以下是简化示例：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;
}

image explanation what I want to achieve

Answer 1

可以做到，但需要三个控制级别：

存在外部容器以建立相对位置。
它的内容容器控制着大小和溢出。
下拉容器对光标做出反应。

为此：

尝试一下：

<!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 &gt;
            <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>

Answer 2

将position: static添加到父元素。

允许下拉元素溢出具有隐藏或滚动溢出的容器

2 个答案: