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

Question

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

26

我有一个水平滚动容器，并且在其中打开了一个下拉菜单（position: absolute）。我希望打开的下拉菜单可以在垂直方向上溢出这个容器。 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;
}

image explanation what I want to achieve

- matcygan

2

旁注：停止使用表格进行布局如何？您应该仅将其用于数据表示... - Lelio Faieta

谢谢你的附注，但正如你所看到的，这只是布局的简化版本。表格是复杂的，用于呈现可比较的数据，下拉菜单是多选的一部分。 - matcygan

表格无论如何都没有问题... 问题已经编辑。 - matcygan

您可以为“容器”元素设置高度。 - saleh katebi

3个回答

1

我遇到了同样的问题，但我用JavaScript解决了它，因为CSS解决方案不能在父级水平滚动时移动下拉选项。

以下是我使用JavaScript的解决方法：

<style>
.outer-container {
  position: relative;
}

.container {
  display: flex;
  align-items: center; 
  gap: 20px; 
  width: 200px; 
  background-color: gainsboro;
  height: 70px;
  padding: 10px 20px;
  overflow-x: scroll; 
  margin: 0 auto;
  margin-top: 300px;
}

.content {
  cursor: pointer;
  display: block;
}

.content::after {
  content '&darr'
  display: block;
}

.content ul {
  position: absolute;
  background-color: black;
  color: white;
}
</style>

<div class='outer-container'>
  <div class='container' id='scrollable'>
    <span>Home</span>
    <span>About</span>
    <span class='content' id='content'>
      Dropdown
      <ul id='dropdown'>
        <li>option1</li>
        <li>option2</li>
        <li>option3</li>
        <li>option4</li>
      </ul>
    </span>
    <span>Contact</span>
  </div>
</div>

<script>
const scrollable = document.getElementById("scrollable")
const content = document.getElementById("content")
const dropdown = document.getElementById("dropdown")

scrollable.addEventListener(
  'scroll',
  () => {
    const contentRect = content.getBoundingClientRect()
    dropdown.style.left = contentRect.left + 'px'
  }
)
</script>

你可以在 Codepen 上查看它。

- Tammibriggs

-1

将 position: static 添加到父元素。

- Adnan Khan

运行得非常顺利！ - Alon Dor

也对我有用！ - Roee Angel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ray Butterworth · Accepted Answer

可以实现，但需要三个层次的控制：

外部容器用来建立相对定位。
它的内容容器控制大小和溢出。
下拉容器根据光标反应。

尝试这个:

<!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>