Getting Bootstrap tabs to fill height automatically down to footer?

twitter-bootstrap tabs header height sticky-footer
JG707 picture JG707 · Apr 1, 2013 · Viewed 9.7k times · Source

I'm having the following issue:

I have a bootstrap based header row, tabbed content row with 3 columns, and footer row. I would like the tabbed content row to make use of the max available screen space up to the footer. This should always result in an even line of the bottom of 3 tabbed areas.

I've tried several things referenced here in the past, but wasn't able to make any of them work for me correctly.

I've set up a jsfiddle with an example of my problem: http://jsfiddle.net/VDtgT/embedded/result/

Here's my sloppy example code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://necolas.github.com/normalize.css/1.1.0/normalize.css" rel="stylesheet" media="screen">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet"> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>


<style>

hr {
border: 0;
width: 100%;
color: #f00;
background-color: #000;
height: 1px;
margin-top: 2px; 
margin-bottom: 3px; 
 }

img { 
border:1px solid #D3D3D3;
}

body { margin: 2px 2px 0px 2px }



</style>  <!-- // Main CSS styles -->   

</head> 
    <body>


<!-- *** TOP ROW -->
<div class="row-fluid show-grid">
<div class="span12" style="background-color: #ddd;" align="center">HEADER</div>
    </div> 
<hr>

<!-- *** MIDDLE ROW --->
<div class="row-fluid">
        <div class="span4">

      <div class="tabbable" style="margin-bottom: 10px;">
          <ul class="nav nav-tabs">
            <li class="active"><a href="#tab11" data-toggle="tab">Group1</a></li>
            <li><a href="#tab12" data-toggle="tab">Group2</a></li>
          </ul>


          <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
            <div class="tab-pane active" id="tab11">                        
    <button style="width: 48%" type="button" class="btn btn-large btn-primary">BUTTON</button>
    <button style="width: 48%" type="button" class="btn btn-large btn-primary">BUTTON</button>
<br />
    <button style="width: 48%" type="button" class="btn btn-large btn-primary">BUTTON</button>
    <button style="width: 48%" type="button" class="btn btn-large btn-primary">BUTTON</button>
<br />
    <button style="width: 48%" type="button" class="btn btn-large btn-primary">BUTTON</button>
    <button style="width: 48%" type="button" class="btn btn-large btn-primary">BUTTON</button>
<br />
    <button style="width: 48%" type="button" class="btn btn-large btn-primary">BUTTON</button>
    <button style="width: 48%" type="button" class="btn btn-large btn-primary">BUTTON</button>
<br />
    <button style="width: 48%" type="button" class="btn btn-large btn-primary">BUTTON</button>
    <button style="width: 48%" type="button" class="btn btn-large btn-primary">BUTTON</button>
<br />
    <button style="width: 48%" type="button" class="btn btn-large btn-primary">BUTTON</button>
    <button style="width: 48%" type="button" class="btn btn-large btn-primary">BUTTON</button>
<br />
    <button style="width: 48%" type="button" class="btn btn-large btn-primary">BUTTON</button>
    <button style="width: 48%" type="button" class="btn btn-large btn-primary">BUTTON</button>
<br />
    <button style="width: 48%" type="button" class="btn btn-large btn-primary">BUTTON</button>
    <button style="width: 48%" type="button" class="btn btn-large btn-primary">BUTTON</button>



            </div>
            <div class="tab-pane" id="tab12">
            <Pre>Empty</pre>
            </div>



        </div>
          </div>
        </div> 




            <div class="span3">
       <div class="tabbable" style="margin-bottom: 10px;">
          <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab">Tab One</a></li>
            <li><a href="#tab2" data-toggle="tab">Tab Two</a></li>
          </ul>

          <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
            <div class="tab-pane active" id="tab1">
    <button style="width: 45%" type="button" class="btn btn-large btn-success">button</button>
    <button style="width: 45%" type="button" class="btn btn-large btn-success">button</button>
<br />

    <button style="width: 45%" type="button" class="btn btn-large btn-success">button</button>
    <button style="width: 45%" type="button" class="btn btn-large btn-success">button</button>
<br />

    <button style="width: 45%" type="button" class="btn btn-large btn-success">button</button>  
    <button style="width: 45%" type="button" class="btn btn-large btn-success">button</button>
<br />
    <button style="width: 45%" type="button" class="btn btn-large btn-success">button</button>
    <button style="width: 45%" type="button" class="btn btn-large btn-success">button</button>
<br />
    <button style="width: 45%" type="button" class="btn btn-large btn-success">button</button>
    <button style="width: 45%" type="button" class="btn btn-large btn-success">button</button>
<br />
    <button style="width: 45%" type="button" class="btn btn-large btn-success">button</button>
    <button style="width: 45%" type="button" class="btn btn-large btn-success">button</button>
<br />
    <button style="width: 45%" type="button" class="btn btn-large btn-success">button</button>
    <button style="width: 45%" type="button" class="btn btn-large btn-success">button</button>
<br />
    <button style="width: 45%" type="button" class="btn btn-large btn-success">button</button>
    <button style="width: 45%" type="button" class="btn btn-large btn-success">button</button>
<br />
            </div>
            <div class="tab-pane" id="tab2">
            <pre>Empty</pre>
            </div>


          </div>
        </div> 

        </div>




                    <div class="span5">


 <div class="tabbable" style="margin-bottom: 10px;">                        

          <ul class="nav nav-tabs">
            <li class="active"><a href="#tab98" data-toggle="tab">Pane1</a></li>
            <li><a href="#tab99" data-toggle="tab">Pane2</a></li>
          </ul>


          <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">         

          <div class="tab-pane active" id="tab98">  

              <br />
<div class="span3"><a href="#"> <img src="http://placehold.it/150x150" alt="img1"></a>             </div>
<div class="span3"><a href="#"> <img src="http://placehold.it/150x150" alt="img1"></a> </div>
<div class="span3"><a href="#"> <img src="http://placehold.it/150x150" alt="img1"></a> </div>
<div class="span3"><a href="#"> <img src="http://placehold.it/150x150" alt="img1"></a> </div>
<br />

<div class="span3"><a href="#"> <img src="http://placehold.it/150x150" alt="img1"></a> </div>
<div class="span3"><a href="#"> <img src="http://placehold.it/150x150" alt="img1"></a> </div>
<div class="span3"><a href="#"> <img src="http://placehold.it/150x150" alt="img1"></a> </div>
<div class="span3"><a href="#"> <img src="http://placehold.it/150x150" alt="img1"></a>    </div>
<br />

<div class="span3"><a href="#"> <img src="http://placehold.it/150x150" alt="img1"></a> </div>
<div class="span3"><a href="#"> <img src="http://placehold.it/150x150" alt="img1"></a> </div>
<div class="span3"><a href="#"> <img src="http://placehold.it/150x150" alt="img1"></a> </div>
<div class="span3"><a href="#"> <img src="http://placehold.it/150x150" alt="img1"></a> </div>


</div>


   <div class="tab-pane" id="tab99">            
<pre>Empty</pre>
            </div>

        </div>



</div>
</div>  






        </div>

<hr>        
<!-- FOOTER BEGIN --> 


<div class="row-fluid">
<div class="span12" style="background-color: #ddd;" align="center">
    Goal: Footer stuck to bottom of screen & bottom of the 3 tab frames directly above (regardless of content). Button blocks should expand with vertical spacing as needed to fill screen to footer.
</div>
</div>



  </body>
</html>

Thanks for any help you can provide.

Answer

JG707 picture JG707 · Apr 2, 2013

I was able to get pretty close..

I used the Bootstrap "sticky footer navbar" example here: twitter.github.com/bootstrap/examples/sticky-footer-navbar.html

This is for sticking the footer to the bottom.

The "magic" of the automatically sizing the tabs happens via jquery dynamically setting max-height and min-height CSS variables. I just adjusted the multiplier until the bottom of the tabs were high enough off of the footer for my liking. fwiw, I also just found the jquery "equalize" command which may be a cleaner way of doing the same: (http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/)

Anyway, the final updated fiddle for my example is here:

http://jsfiddle.net/VDtgT/19/embedded/result

<b>

Related questions

Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink

I'm developing a web page in which I'm using Twitter's Bootstrap Framework and their Bootstrap Tabs JS. It works great except for a few minor issues, one of which is I do not know how go directly to a specific …

Read More
Stacked Tabs in Bootstrap 3

I am trying to implement left-aligned stacked tabs using the Tab jquery plugin in Bootstrap 3 where tabs are rendered vertically to the left of tab content, rather than on top. When I try the following; <ul class="nav nav-tabs …

Read More
Bootstrap 3: Keep selected tab on page refresh

I am trying to keep selected tab active on refresh with Bootstrap 3. Tried and checked with some question already been asked here but none of work for me. Don't know where I am wrong. Here is my code HTML <!…

Read More