twitter bootstrap container div height

Ich benutze twitter Bootstrap und ich möchte ein Container div am Ende der Seite zu strecken, aber es tut nicht. Es ist immer die Größe, die dem Inhalt entspricht. Wie behebt man das?twitter bootstrap container div height

<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>

Die 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; 
}

Vielen Dank für jede Hilfe

Kelly

Quelle

2012-07-04 Kelly Goedert

Es ist möglich, mit ein bisschen jQuery zu erreichen.

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/

Extra:

immer eine .span* in einem .row hinzuzufügen. gibt es eine Art negativer Marge auf einem .row den linken Rand aus den ersten .span

Sie die <a class="btn btn-navbar">

Quelle

2012-07-04 20:16:21 baptme

Danke für die Diskussion zu schließen vergessen zu kompensieren, abgeleitet ich die folgende Lösung:

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); 
})

Quelle

2013-01-13 16:43:13 dei79

twitter bootstrap container div height

Antwort

Verwandte Themen