让 Bootstrap 选项卡自动填充高度到页脚？
Posted
技术标签:
【中文标题】让 Bootstrap 选项卡自动填充高度到页脚？【英文标题】：Getting Bootstrap tabs to fill height automatically down to footer? 【发布时间】：2013-03-22 21:18:18 【问题描述】：我遇到以下问题：
我有一个基于引导程序的标题行、包含 3 列的选项卡式内容行和页脚行。我希望选项卡式内容行能够利用到页脚的最大可用屏幕空间。这应该始终导致 3 个选项卡区域底部的偶数行。
我过去曾尝试过这里提到的几件事情，但无法让其中任何一件正确地为我工作。
我已经用我的问题的一个例子设置了一个 jsfiddle： http://jsfiddle.net/VDtgT/embedded/result/
这是我草率的示例代码：
<!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" ></a> </div>
<div class="span3"><a href="#"> <img src="http://placehold.it/150x150" ></a> </div>
<div class="span3"><a href="#"> <img src="http://placehold.it/150x150" ></a> </div>
<div class="span3"><a href="#"> <img src="http://placehold.it/150x150" ></a> </div>
<br />
<div class="span3"><a href="#"> <img src="http://placehold.it/150x150" ></a> </div>
<div class="span3"><a href="#"> <img src="http://placehold.it/150x150" ></a> </div>
<div class="span3"><a href="#"> <img src="http://placehold.it/150x150" ></a> </div>
<div class="span3"><a href="#"> <img src="http://placehold.it/150x150" ></a> </div>
<br />
<div class="span3"><a href="#"> <img src="http://placehold.it/150x150" ></a> </div>
<div class="span3"><a href="#"> <img src="http://placehold.it/150x150" ></a> </div>
<div class="span3"><a href="#"> <img src="http://placehold.it/150x150" ></a> </div>
<div class="span3"><a href="#"> <img src="http://placehold.it/150x150" ></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>
感谢您提供的任何帮助。
【问题讨论】：
我能够非常接近我想要的...我在这里使用了 Bootstrap“粘性页脚导航栏”示例：twitter.github.com/bootstrap/examples/sticky-footer-navbar.html 将页脚粘贴到底部。但是自动调整标签大小的“魔力”是通过 jquery 动态设置 max-height 和 min-height CSS 变量来实现的。我只是调整了乘数，直到选项卡的底部离页脚足够高以满足我的喜好。更新的小提琴在这里：jsfiddle.net/VDtgT/9/embedded/result 【参考方案1】：我能够非常接近..
我在这里使用了 Bootstrap “粘性页脚导航栏”示例：twitter.github.com/bootstrap/examples/sticky-footer-navbar.html
这是为了将页脚粘贴到底部。
自动调整标签大小的“魔力”是通过 jquery 动态设置 max-height 和 min-height CSS 变量来实现的。我只是调整了乘数，直到选项卡的底部离页脚足够高以满足我的喜好。 fwiw，我也刚刚找到了 jquery "equalize" 命令，这可能是一种更简洁的方法：(http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/)
无论如何，我的示例的最终更新小提琴在这里：
http://jsfiddle.net/VDtgT/19/embedded/result
<b>
【讨论】：
【参考方案2】：为什么要固定标签的大小？你可以让它们是可变的，当内容需要它时，这将把页脚向下推。
查看您最新的代码，您似乎没有使用您提到的示例正在使用的#wrap 或.push。您需要包装您的内容，然后像示例中一样添加<div class="push"></div>。
【讨论】：
是的，粘性页脚是解决方案的一部分（在我上面的评论中提到）。我认为，另一部分需要 jquery 为选项卡式内容区域动态设置最大高度和最小高度。现在我只是想弄清楚如何使每个按钮行之间的间距均匀的按钮居中......希望这将是一个更容易的问题:) 我似乎总是落后于你最新的帖子！我更新了我的回复。正如我所说，我看不到您包装内容或使用推送 。如果你对你现在所拥有的感到满意，那么对于居中你正在查看 垂直对齐。 确认。对不起，你是对的。我想我正在使用我预分叉的 jfiddle 版本。正确的代码在这里供参考，这里是：jsfiddle.net/VDtgT/19/embedded/result 抱歉没有看到你的问题。我正在修复标签，因为这是用于应用程序 gui。 Target 是一款平板电脑，但我们偶尔也会在大型触摸显示器上使用。无论目标设备如何，我都希望 GUI 的外观和感觉相同。 （对不起......我在 webdev 术语上落后了大约 7 年，正在追赶）:)以上是关于让 Bootstrap 选项卡自动填充高度到页脚？的主要内容，如果未能解决你的问题，请参考以下文章