twitter bootstrap contenedor div altura

Estoy usando twitter bootstrap y me gustaría que un contenedor div se extienda hasta el final de la página, pero no es así. Siempre es el tamaño correspondiente al contenido. ¿Cómo arreglar eso?twitter bootstrap contenedor div altura

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

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

Gracias por cualquier ayuda

Kelly

Fuente

2012-07-04 Kelly Goedert

Es posible lograr con un poco de 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/

adicional:

Siempre añadir un .span* dentro de un .row. hay una especie de margen negativo en un .row para compensar la izquierda del margen de la primera .span

Usted se olvidó de cerrar las <a class="btn btn-navbar">

Fuente

2012-07-04 20:16:21 baptme

Gracias por la discusión, que derivó la siguiente solución:

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

Fuente

2013-01-13 16:43:13 dei79

twitter bootstrap contenedor div altura

Respuesta

Cuestiones relacionadas