如何在滾動的容器之外顯示絕對位置的div？

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;
}

小提琴演示

 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

如果您希望保持.container的scroll並仍然完全顯示dropdown menu這是一個解決方案。

我想象的是將菜單從.container取出，並將所有內容放入wrapper 。 好消息是正在使用JavaScript ，因此它有所幫助。

HTML 應該是這樣的：

<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的位置：

.dropdown-content {
  left: 19px; // also top, right and bottom if you need
}

希望它也能有用。