子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。

我希望我能为您提供帮助;）