title: Bootstrap Accordion Height
body: <p>In my recent endeavours, I encountered a few issues concerning Bootstrap 3. The issue is concerning accordion element. Example is one-one copy of a basic example from bootstrap page.</p>
  
  <pre><code>&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 data-toggle="collapse" data-parent="#accordion" href="#collapseOne"&gt;
                      Collapsible Group Item #1
                  &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;
                  Anim pariatur cliche reprehenderit, enim eiusmod.....
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
              &lt;h4 class="panel-title"&gt;
                  &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"&gt;
                      Collapsible Group Item #2
                  &lt;/a&gt;
              &lt;/h4&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The  main issue is with height. body height is 100%, end for example collapseOne is 100% but it snapps it to content height, standard !important is not helping only for example 600px is stretching it, which is not satisfactory. JS examples in previous questions are not working because they are Jquery ui based. Have you any CSS based solution?</p>