子ul下拉列表因其父高而被截斷

Question

 <div class="carousel-inner">
   ...
   <ul class="dropdown-menu">
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
   </ul>
</div>

我在div標簽中有4個要素，但僅顯示2個。 如何增加高度顯示所有下拉菜單項。

我已經使用了overflow：auto; 但這會將滾動條添加到整個父元素中，效果並不理想。 padding-bottom也可以在此處使用，但是它可以將父級的背景擴展到不需要的dropdwn之后。

fuelux .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  width: 23%;
  min-width: 50px;
  display: block;

}

 .fuelux .carousel-inner {
   position: relative;
   width: 100%;
   overflow: hidden;
   line-height: 1;
 }

Answer 1

直到幾分鍾前，下面也解決了我的問題，我也面臨着同樣的問題。

style =“ min-height：300px; max-height：100％;”

---

您需要將父div的min-height設置為擴展的子菜單高度大小，以便顯示子菜單時不減去父高度。

我們正在設置max-height，以便CSS不會將min-height視為組件的默認固定高度。 這樣，如果您使用任何動態加載內容（例如GroupBoxes，帶有長列表的Choosen框等），它將擴展。

   <div class="carousel-inner" style="min-height:300px;max-height:100%;">
   ...
   <ul class="dropdown-menu">
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
   </ul>
</div>

注意：對於菜單，我正在加載300px是加載完整子菜單所需的最大高度。 檢查擴展菜單大小的高度，並將其更改為最小高度值以獲得所需的結果。

Answer 2

您是否將高度設置為div包裝機？

如果是，則將高度從樣式表中刪除，並且高度將由div包裝器中的內容自動設置。

例如：

樣式：

div {
width: 200px; float: left;
}

ul li {
height: 20px; width: 200px; float: left;
}

當您在ul內部有4個元素時，die div-wrapper的高度將為80px。

我希望我能為您提供幫助;）