微博bootstrap容器分区高度

我使用twitter引导，我想容器div伸展到页面的底部，但它没有。它始终是与内容相对应的大小。如何解决这个问题？微博bootstrap容器分区高度

<body> 
    <div id="main-wrapper"> 
     <div class="navbar navbar-fixed-top"> 
      <div class="navbar-inner"> 
       <div class="container"> 
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> 
        <div class="nav-collapse"> 
         <ul class="nav"> 
          .... 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 

     <div class="container"> 
      <div class="row"> 
       .....   
      </div> 
     </div> 

     <div class="container"> <!-- this is the one I want to stretch to the bottom --> 
      <div class="row"> 
       <ui:insert name="body" /> 
      </div> 
     </div> 

     <div id="push"></div> 
     </div> 
     <footer role="contentinfo"> 
      footer content 
     </footer> 

    </body>

的CSS：

footer[role="contentinfo"] { 
    color: #666; 
    background: black; 
    padding: 18px 0; 
} 

footer[role="contentinfo"] p { 
    margin: 0; 
} 
/* Sticky Footer styles begin */ 
html,body { 
    height: 100%; 
} 

#push { 
    height: 54px; 
} 

footer[role="contentinfo"] { 
    height: 18px; /* accounts for padding */ 
} 

#main-wrapper{ 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0px auto -54px; 
}

感谢所有帮助

凯利

来源

2012-07-04 Kelly Goedert

有可能实现与一个位的jQuery。

HTML：

<div id="main-wrapper"> 
    <div id="navbar" class="navbar navbar-fixed-top"> 
     <div class="navbar-inner"> 
      <div class="container"> 
       <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </a> <!-- you forgot the closing </a> --> 
       <div class="nav-collapse"> 
        <ul class="nav"> 
         .... 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div id="firstcontainer" class="container" > 
     <div class="row"> 
      <span class="span12"> 
      ..... 
      </span> <!-- allways include a .span* in a .row -->   
     </div> 
    </div> 

    <div id="secondcontainer" class="container" style="background-color:#cccccc;"> <!-- this is the one I want to stretch to the bottom --> 
     <div class="row"> 
      <div class="span12"> 
       <ui:insert name="body" /> 
      </div> 
     </div> 
    </div> 

    <div id="push"></div> 
    </div> 
    <footer role="contentinfo"> 
     footer content 
    </footer>

的jQuery：

function sizing() { 
    var wrapperheight=$("#main-wrapper").height(); 
    var navbarheight=$("#navbar").height(); 
    var firstcontainerheight=$("#firstcontainer").height(); 
    var pushheight=$("#push").height();  
    var footerheight=$("#footer").height(); 
    var secondcontainerheight=wrapperheight-navbarheight-firstcontainerheight-pushheight-footerheight-50; 
    $("#secondcontainer").height(secondcontainerheight+"px"); 
} 
$(document).ready(sizing); 
$(window).resize(sizing);

的jsfiddle：

http://jsfiddle.net/baptme/6Lghx/1/

附加：

总是添加.span*一个.row内。有一个排序上.row阴性切缘的补偿左缘断第一.span

你忘了关<a class="btn btn-navbar">

来源

2012-07-04 20:16:21 baptme

谢谢你的讨论中，我得出了以下解决方案：

jQuery.fn.fill_height = function() { 
    var bodyheight = $('body').height() - 200; 
    $(this).css('min-height', bodyheight + "px"); 
} 

$(function() { 
    function fill_heigh_callback() { 
     $('.container.full-height').fill_height() 
     $('.container-fluid.full-height').fill_height() 
    } 

    fill_heigh_callback() 
    $(window).resize(fill_heigh_callback); 
})

来源

2013-01-13 16:43:13 dei79

微博bootstrap容器分区高度

回答

相关问题