html - child ul 下拉列表被切断，因为它是 parent 的高度

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 的最小高度设置为展开的子菜单高度大小，以便子菜单显示时不会被父高度截断。

我们正在设置 max-height 以便 CSS 不会将 min-height 视为组件的默认固定高度。这样，如果您使用任何动态加载内容(如 GroupBox、带有长列表的选择框等)，它就会扩展。

   <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 是加载完整子菜单所需的最大高度。检查展开菜单大小的高度并使用最小高度值更改它以获得所需的结果。