How to split browser window in to two picies with bootstrap? - css

Question

I need to split window in to the 2 horizontal divs by height:50%; width:100%:, is it possible with bootstrap? Tried like this:
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" style="border:1px solid red">
1
</div>
<div class="col-lg-12" style="border:1px solid red">
2
</div>
</div>
</div>
With green matched how it should be...

Answer 1

Just a suggestion calculate the height of the .row div dynamically using javascript. CSS height:50% will only work if the parent div is given some height.
EG: .row{ height:500px; } will work fine.
But calculate this height using jQuery function $(window).height().

Answer 2

Assuming this is your only markup you can give each parent element a height of 100%:
body,html {
height: 100%;
}
.container-fluid {
height: 100%;
}
.row {
height: 100%;
}
.col-lg-12 {
height: 50%;
}
DEMO

Answer 3

Not sure why you would need to have 2 boxes with no content containing set heights?
Surely the rational thing to do is fill it with content first, then add padding to your divs to make the design the way you want it.
Adding heights to an empty div is asking for trouble early in your build stage.
Simply add 1 x id to each col-lg-12 as shown below:
<div class="col-lg-12" id="topContent" style="border:1px solid red">
1
</div>
<div class="col-lg-12" id="bottomContent" style="border:1px solid red">
2
</div>
Now when you finished adding content simply reference the ID and add padding top or bottom to your id and you will find it is a lot simpler to code going forward. Trying to mess with set heights early really is looking for problems if going responsive.