Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Getting Bootstrap tabs to fill height automatically down to footer?

Tags:

tabs

height

twitter-bootstrap

header

sticky-footer

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.

like image 648
JG707 Avatar asked Apr 01 '13 18:04

JG707

1 Answers

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>
like image 94
JG707 Avatar answered Sep 17 '22 17:09

JG707
Sign in to Comment

Related questions

Can aria-disabled only be applied to a focusable element? Doesn't it also apply to child elements?
CSS: Vertical align text of anchor and button
Using Frames in Bootstrap? [duplicate]
Override Bootstrap CSS
Javascript error when destroying Bootstrap popover
How to use bootstrap and LESS and keep a clean project?
jQuery Bootstrap ScrollSpy doesn't work
Table-row border is invisible
Bootstrap Search Input with Appended Button - Displaying Rounded Corners on All Sides [duplicate]

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!