问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

我有水平滚动容器并在里面打开了下拉菜单（位置：绝对）。我希望打开的下拉菜单垂直溢出这个容器。 overflow-y: visible 不起作用，容器无论如何都可以垂直滚动。

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

图片说明我想要实现的目标

原文由 matcygan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascripthtmlcssoverflow
阅读 644
1 个回答
得票最新
社区维基
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>

原文由 Ray Butterworth 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题