jquery-ui - jquery ui 手风琴滚动条

Question

我有一个看起来很棒的 jqueryUI 手风琴。我将有大约 10 个部分（标题），它们正好适合屏幕。但是，在较小的屏幕上，它会切断我的一些部分标题。（我已经可以通过缩小浏览器窗口来模拟这个）。如果手风琴标题不垂直放置，如何显示滚动条？

手风琴被包裹在一个没有设置选项的 div 中。就好像 div 需要一个 MIN 高度以确保所有标题都可以出现，并为部分内容留出一些空间。

我的完整代码如下：

  <script>
  $(function() {
    $( "#settingsnavigation" ).accordion({ 
      heightStyle: "fill",
      clearStyle: true, 
      autoHeight: false }
    );
  });
  </script>

<div id="settingsnavigation" style="width:220px">
  <h3>General</h3>
  <div>
      <div class="settingsubsection">User</div>
      <div class="settingsubsection">Security</div>
      <div class="settingsubsection">Units &amp; Ranges</div>
      <div class="settingsubsection">Notifications</div>
      <div class="settingsubsection">Vehicles</div>
      <div class="settingsubsection">Device</div>
  </div>
  <h3>Financial</h3>
  <div>
      <div class="settingsubsection">Balance</div>
      <div class="settingsubsection">History</div>
      <div class="settingsubsection">Purchase</div>
  </div>
  <h3>Vehicle: Cadillac Seville STS</h3>
  <div>
      <div class="settingsubsection">General</div>
      <div class="settingsubsection">Units &amp; Ranges</div>
      <div class="settingsubsection">Select Reminders</div>
      <div class="settingsubsection">Edit Reminders</div>
  </div>
</div>

Answer 1

容器 div 的 CSS 应该是

overflow: auto;