jquery-ui - jqueryuiアコーディオンスクロールバー

Question

見栄えのするjqueryUIアコーディオンがあります。画面にぴったり収まる約10個のセクション（ヘッダー）があります。ただし、小さい画面では、セクションヘッダーの一部が切り取られます。（ブラウザウィンドウを縮小することで、これをすでにシミュレートできます）。アコーディオンヘッダーが垂直に収まらない場合、どうすればスクロールバーを表示できますか？

アコーディオンは、オプションが設定されていないdivにラップされています。これは、すべてのヘッダーを表示できるようにするためにdivに最小の高さが必要であり、セクションコンテンツ用のスペースがあるかのようです。

私の完全なコードは次のとおりです。

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