Full Page Section CSS - css

Question

Im working on my very first website/freelance project. I have some knowledge of html/css ruby rails and bootstrap so far.
I was wondering if you could help me out with something I havn't been able to look up. I have tried to find out how to make certain part of the page take up the entire portion of the browser's window. The site I am working on is 1 long page, with 4 different sections, each of which needs to take the entire browser's view. I was wondering if there was an easy way with bootstrap to do this? Any help is appreciated, thanks so much.

Answer 1

Use the fluid grid (http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem) and add 100% width to your container divs, like:
css:
<style type="text/css">
/* after your bootstrap css inclusing */
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container
{
width: 100%;
}
</style>
html:
<div class="container">
<div class="row-fluid">
<div class="span4" style="background-color:red;">...</div>
<div class="span8" style="background-color:yellow;">...</div>
</div>
</div>
update:
Split in rows of 50% height:
css:
<style type="text/css">
/* after your bootstrap css inclusing */
body, html, .container,.row-fluid .hunderd{ height:100%; min-height:100%; !important;}
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container
{
width: 100%;
}
.fifty {height:50%;min-height:50%;}
</style>
html:
<div class="container">
<div class="row-fluid fifty">
<div class="span6 hunderd" style="background-color:red;">...</div>
<div class="span6 hunderd" style="background-color:yellow;">...</div>
</div>
<div class="row-fluid fifty">
<div class="span6 hunderd" style="background-color:blue;">...</div>
<div class="span6 hunderd" style="background-color:orange;">...</div>
</div>
</div>