Geek Answers Handbook

Twitter soundtrack

I have a Bootstrap page with accordions / folded on it. I would like this accordion to occupy the entire height of the page (minus the navigation bar at the top).

Does anyone have any pointers on how best to achieve this? If CSS solution is not an option, I am ready to use JavaScript.

Here's the markup:

<body> <div class="navbar navbar-inverse"> <div class="navbar-inner"> Navigation </div> </div> <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Collapsible Group Item #1 </a> </div> <div id="collapseOne" class="accordion-body collapse in"> <div class="accordion-inner"> Anim pariatur cliche... </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> Collapsible Group Item #2 </a> </div> <div id="collapseTwo" class="accordion-body collapse"> <div class="accordion-inner"> Anim pariatur cliche... </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> Collapsible Group Item #2 </a> </div> <div id="collapseThree" class="accordion-body collapse"> <div class="accordion-inner"> Anim pariatur cliche... </div> </div> </div> </div> </body> </html>

http://jsfiddle.net/Ye2xq/2/

Thanks!

+7
source share
2 answers

Assuming that you mean the entire accordion, you have two possible solutions.

First, if you can set a fixed height for the parent, you can simply use height:100%; An example markup would look something like this:

HTML <div class="page"> <div class="accordion"> content </div> </div>
CSS .page { height: 800px; //or whatever } .accordion { height: 100%; } .page { height: 800px; //or whatever } .accordion { height: 100%; }

Alternatively, as this is often impossible. You can use javascript / jQuery. Something like this will work:

 jQuery(document).ready(function($) { //cache the accordion object to variable var accordion = $('div.accordion'); //set accordion object equal to target divs height accordion.height($('div.page').height()); });

Example: http://jsfiddle.net/Ye2xq/11/

-one
source

Not sure if this is exactly what you are looking for, but you can do something like a sticky footer for the top navigation bar, which assumes that the height will not change.

CSS

 .navbar {background-color:#999;} .accordion {background-color:yellow; top:18px; bottom:0; position:absolute;}

Here is the violin

http://jsfiddle.net/Ye2xq/31/

-one
source

More articles:


All Articles