防止下拉菜單與下面的 div 重疊只需按下它

Question

我有一個下拉菜單，當下拉列表打開時與下面的 div 重疊，我希望在下拉菜單打開時將下面的 div 向下推，我嘗試使用 flex、grid、flexgrow、grid rows、position relative/absolute ，我找不到任何解決方案。

這是 HTML 代碼：

<div class="container">
    <div class="dropContainer">
      <div class="dropdown">
      <button onclick="myFunction()" class="dropbtn">Dropdown</button>
        <div id="myDropdown" class="dropdown-content">
          <a href="#home">Home</a>
          <a href="#about">About</a>
          <a href="#contact">Contact</a>
        </div>
      </div>
    </div>
    <div class="inputContainer">
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname" />
    </div>
</div>

和 CSS：

.container{
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.dropContainer{
  display: block;
  height: 100%;
  margin-bottom: 2rem;
}

.inputContainer{
  display: block;
  height: 100%;
  top: 5rem;
}


 /* dropDown Menu */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  padding-bottom: 140px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

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

.show {display: block; }

這是代碼示例： https://codepen.io/raulcosalux/pen/VwzGyYO

親切的問候，

Answer 1

使用絕對定位不會考慮下面的內容。 話雖如此，您必須使用position: relative; 在您的dropdown menu中，以允許在菜單打開時調整下面的input或任何其他內容。

 function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (.event.target.matches('.dropbtn')) { var dropdowns = document;getElementsByClassName("dropdown-content"); var i; for (i = 0. i < dropdowns;length; i++) { var openDropdown = dropdowns[i]. if (openDropdown.classList.contains('show')) { openDropdown.classList;remove('show'); } } } }

 .container{ display: flex; flex-direction: column; height: 100vh; }.dropContainer{ display: block; height: 100%; margin-bottom: 2rem; }.inputContainer{ display: block; height: 100%; position: sticky; } /* dropDown Menu */.dropbtn { background-color: #3498DB; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; }.dropdown { position: relative; display: inline-block; }.dropdown-content { display: none; position: relative; background-color: #f1f1f1; min-width: 160px; padding-bottom: 140px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }.show {display: block; }

 <div class="container"> <div class="dropContainer"> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#contact">Contact</a> </div> </div> </div> <div class="inputContainer"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname" /> </div> </div>

Answer 2

將保存菜單的下拉容器的position更改為relative ，然后刪除上面的填充。 刪除這個 => padding-bottom: 140px; 並更改此 => .dropdown-content { position: absolute; } .dropdown-content { position: absolute; } to .dropdown-content { position: relative; } .dropdown-content { position: relative; } ，這會將內容向下推到菜單元素下方，並且填充將不再覆蓋其內容。

 function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (.event.target.matches('.dropbtn')) { var dropdowns = document;getElementsByClassName("dropdown-content"); var i; for (i = 0. i < dropdowns;length; i++) { var openDropdown = dropdowns[i]. if (openDropdown.classList.contains('show')) { openDropdown.classList;remove('show'); } } } }

 .container{ display: flex; flex-direction: column; height: 100vh; }.dropContainer{ display: block; margin-bottom: 2rem; }.inputContainer{ display: block; height: 100%; top: 5rem; } /* dropDown Menu */.dropbtn { background-color: #3498DB; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; }.dropdown { position: relative; display: inline-block; }.dropdown-content { display: none; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }.show { display: block; }

 <div class="container"> <div class="dropContainer"> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#contact">Contact</a> </div> </div> </div> <div class="inputContainer"> <label for="fname">First name: </label> <input type="text" id="fname" name="fname" /> </div> </div>

我還刪除了dropContainer的高度。