Question

我有一个在Chrome上完美运行的下拉菜单，然而，数据溢出列表，我无法向下滚动。我试图用户＆＃34;溢出：隐藏＆＃34;但它只是隐藏溢出数据而无法在Chrome和资源管理器上向下滚动。

<div class="dropdown info-required">
    <button name="mccGroupButton" class="btn btn-default text-left dropdown-toggle 
                 requiredInput picklistOverflow form-control" type="button" 
                 id="mccGroupButtonId" data-toggle="dropdown" aria-expanded="true" 
                 style="text-align: left !important; padding-right:5px;width:140px;
                 position: relative;"> 
      <span id="chosenGroup"></span>
      <span class="mccArrow">▾</span>
    </button>
  <ul id="mccGroupUlId" class="dropdown-menu picklistValuesOverflow" role="menu" 
          aria-labelledby="mccGroupButtonId" style="width:auto;min-width:250px;
          height:220px; bottom: 0px;">
  </ul>
</div>

Answer 1

使用overflow:hidden任何大于固定大小div的内容都将被隐藏。

相反，请使用

overflow:scroll

这将强制始终显示滚动条。它将在不需要时禁用，并根据需要自动启用。这可确保您的内容始终保持相同。

替代方案是：

overflow:auto

或

overflow-y:auto

只会根据需要显示滚动条 - 但如果您的内容动态更改，则可以强制更改布局。那么使用哪个取决于您的要求。

每个例子：

div {
border:1px solid #CCC;
float:left;
width:75px;
height:75px;
}

<div style='overflow:auto'>
auto 
</div>
<div style='overflow:auto'>
auto<br/>
1<br/>2<br/>3<br/>4<br/>5<br/>6
</div>
<div style='overflow:scroll'>
scroll<br/>
1<br/>2<br/>3<br/>4<br/>5<br/>6
</div>
<div style='overflow-y:scroll'>
scroll-y<br/>
1<br/>2<br/>3<br/>4<br/>5<br/>6
</div>
<div style='overflow:hidden'>
hidden<br/>
1<br/>2<br/>3<br/>4<br/>5<br/>6
</div>

Answer 2

<ul id="mccGroupUlId" class="dropdown-menu picklistValuesOverflow" role="menu" 
          aria-labelledby="mccGroupButtonId" style="width:auto;min-width:250px;
          height:auto; bottom: 0px;">

make height：auto;

它不会给滚动填充高度总内容

内容溢出时无法滚动

2 个答案: