Question

我正在尝试创建一个下拉搜索。但是我在使用带有滚动条的容器时发现了一个问题。

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

.container {
  width: 500px;
  height: 300px;
  border: solid gray 1px;
  padding: 10px;
  display: flex;
  overflow: auto;
  
  transform: none;
  position: relative;
  background: #337ab7 !important;
  transition: background-color .3s;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  height: 60px;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}

#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 60px;
  background-color: #f6f6f6;
  min-width: 230px;
  overflow: auto;
  border: 2px solid red;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}
.show {display: block;}

<div class="container">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search..">
    <a href="#about">About</a>
    <a href="#base">Base</a>
    <a href="#blog">Blog</a>
    <a href="#contact">Contact</a>
    <a href="#custom">Custom</a>
    <a href="#support">Support</a>
    <a href="#tools">Tools</a>
  </div>
</div>

可以看到下拉列表被剪切了。

如何解决这个问题？

Answer 1

您在两个元素上有overflow: auto，因此外部元素首先滚动。您只需要确保菜单框的渲染高度不超过可用空间即可。如果不需要其他外部滚动，也可以删除外部滚动。

.container {
    /* overflow: auto; */
}

.dropdown-content {
    max-height: 245px;
}

Fiddle demo

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

.container {
    width: 500px;
    height: 300px;
    border: solid gray 1px;
    padding: 10px;
    display: flex;
    /* overflow: auto; */
    transform: none;
    position: relative;
    background: #337ab7 !important;
    transition: background-color .3s;
}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    height: 60px;
}

.dropbtn:hover,
.dropbtn:focus {
    background-color: #3e8e41;
}

#myInput {
    box-sizing: border-box;
    background-image: url('searchicon.png');
    background-position: 14px 12px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 14px 20px 12px 45px;
    border: none;
    border-bottom: 1px solid #ddd;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 60px;
    background-color: #f6f6f6;
    min-width: 230px;
    max-height: 245px;
    overflow: auto;
    border: 2px solid red;
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {
    background-color: #ddd;
}

.show {
    display: block;
}

<div class="container">
    <button onclick="myFunction()" class="dropbtn">Dropdown</button>
    <div id="myDropdown" class="dropdown-content">
        <input type="text" placeholder="Search..">
        <a href="#about">About</a>
        <a href="#base">Base</a>
        <a href="#blog">Blog</a>
        <a href="#contact">Contact</a>
        <a href="#custom">Custom</a>
        <a href="#support">Support</a>
        <a href="#tools">Tools</a>
    </div>
</div>

如果您不想实现固定高度，请考虑改用Flexbox布局。

Answer 2

如果您希望保留scroll的{{1}}并且仍然完整显示.container，这是一个解决方案。

我想象的是将菜单放在dropdown menu和.container中的所有内容之外。好处是正在使用wrapper，所以有帮助。

HTML是这样的：

JavaScript

然后，您更改<div class="wrapper"> <div class="container"> <button onclick="myFunction()" class="dropbtn">Dropdown</button> </div> <div id="myDropdown" class="dropdown-content"> <input type="text" placeholder="Search.."> <a href="#about">About</a> <a href="#base">Base</a> <a href="#blog">Blog</a> <a href="#contact">Contact</a> <a href="#custom">Custom</a> <a href="#support">Support</a> <a href="#tools">Tools</a> </div> </div>的位置：

.dropdown-content

希望它也很有用。

如何在容器滚动外部显示绝对位置的div？

2 个答案: