title: Bootstrap panel-group accordion with fixed position
body: <p>I'm using the panel-group to make an accordion as shown in the "Collapse" section of the Javascript nav at <a href="http://getbootstrap.com/javascript/#collapse" rel="nofollow">http://getbootstrap.com/javascript/#collapse</a>
  Except that I want the accordion to follow the screen as the user scrolls down, so I wrapped it all in a bootstrap well and added position:fixed to the div's style. Unfortunately, once I scroll to the bottom and try to expand the accordion, it expands off the bottom of the screen. When the accordion isn't position fixed, however, the screen will grow to accommodate the new height of the accordion. Is there a way I can have my cake and eat it too?</p>
  
  <pre><code>&lt;div class="well" style="position: fixed"&gt; &lt;!--Causes this div to grow off the screen--&gt;
      &lt;div class="panel-group" id="accordion"&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h4 class="panel-title"&gt;
                      &lt;a id="panelOneLabel" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"&gt;Title&lt;/a&gt;
                  &lt;/h4&gt;
              &lt;/div&gt;
              &lt;div id="collapseOne" class="panel-collapse collapse in"&gt;
                  &lt;div class="panel-body"&gt;
                  &lt;!--a bunch of content here--&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!--a bunch of other similar panel panel-defaults--&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>