获取Bootstrap标签以自动填充页脚到页脚？

Question

获取Bootstrap标签以自动填充页脚到页脚？

JG7*_*707 6 height tabs header sticky-footer twitter-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>

Run Code Online (Sandbox Code Playgroud)

感谢您的任何帮助,您可以提供.

Answer 1

por*_*ion 0

为什么要固定选项卡的大小？您可以让它们可变，这样当内容需要时就会将页脚向下推。

查看您最新的代码，您似乎没有使用您提到的示例正在使用的#wrap或。.push您需要包装内容，然后添加与<div class="push"></div>示例中一样的内容。

归档时间：	12 年，7 月前
查看次数：	9202 次
最近记录：	7 年，4 月前