twitter-bootstrap - 让 Bootstrap 选项卡自动填充高度到页脚？

我有以下问题:

我有一个基于 Bootstrap 的标题行、带有 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" 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>

感谢您的任何帮助，您可以提供。

最佳答案

我能够非常接近..

我在这里使用了 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/ )

无论如何，我的示例的最终更新 fiddle 在这里:

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

<b>

关于twitter-bootstrap - 让 Bootstrap 选项卡自动填充高度到页脚？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15749547/

twitter-bootstrap - 让 Bootstrap 选项卡自动填充高度到页脚？

上一篇：php - 如何计算PHP中的对角线差？

下一篇：unicode - 兼容范式中的字符串是否已经在相应的规范范式中？