Menu
I am using twitter bootstrap and I would like a container div to stretch to the bottom of the page, but it doesnt. It is always the size corresponding to the content. How to fix that?
<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>
The 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;
}
Thanks for any help
Kelly
708
It's possible to achieve with a bit of 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/
Extra:
Always add a .span* inside a .row.
there's a sort of negative margin on a .row to compensate the left-margin off the first .span
You forgot to close the <a class="btn btn-navbar">
70
Thanks for the discussion, I derived the following solution:
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);
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
