Kel*_*ert 5 css twitter-bootstrap
我正在使用twitter bootstrap,我想要一个容器div延伸到页面的底部,但它没有.它始终是与内容相对应的大小.如何解决？
<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;
}
谢谢你的帮助
黄绿色
使用一点 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);
js小提琴：
http://jsfiddle.net/baptme/6Lghx/1/
额外的：
.span*始终在 a 内添加a .row。a 上有一种负边距.row来补偿第一个的左边距.span
你忘记关闭<a class="btn btn-navbar">