由于父母身高,孩子的ul下拉被切断了

时间:2013-09-04 11:40:16

标签: html css

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

2 个答案:

答案 0 :(得分:1)

我也面临同样的问题,直到几分钟前,以下是解决了我的问题。

  

风格=&#34;最小高度:300像素;最大高度:100%;&#34;

您需要将父div的最小高度设置为展开的子菜单高度大小,以便显示子菜单,但不会显示父级高度。

我们设置max-height,以便CSS不会将min-height视为组件的默认固定高度。如果您使用任何动态加载内容,如GroupBoxes,选择具有长列表的框等,它将会扩展。

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

答案 1 :(得分:0)

您是否将高度设置为div-wrapper?

如果是,请将高度从样式表中删除,高度由div-wrapper内的内容自动设置。

例如:

风格:

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

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

当你在ul里面有4个元素时,div div-wrapper的高度将是80px。

我希望我可以帮助你;)