vendredi 24 juin 2016
Getting Bootstrap tabs to fill height automatically down to 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.
Inscription à :
Publier les commentaires (Atom)
Aucun commentaire:
Enregistrer un commentaire