Difficulty creating CSS vertical grid in Bootstrap 3

Question

student working on my final project.

I am using Bootstrap 3 and am attempting to build a grid with similar structure to this image below:

I am only successful making the grids span horizontally %100 thus far.

You can view my project to see what I have done.

I have attempted creating the following class but have since commented it out in my CSS due to some whacky effects and removed the body positioning.

body {
    position: relative;
}
.fluid-height {
    height: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
} 

Answer 1

You can try setting a height of 100vh to your fluid-height div:

.fluid-height { height:100vh }

You can also use vh with your top grids and equal it all out to 100:

.buffer-p { height:10vh; }
.fluid-height { height:90vh; }

I don't know your requirements, though vh has some caveats it's fairly safe to use it at this point. If you're concerned about support and your class has reached into the Javascript realm already, you can always set up a quick fallback as mentioned in an answer in this post.

Answer 2

You can achieve this with Bootstrap by giving heights to your first and last row's. You can use vh for your heights as outlined in this Fiddle.

You could use static heights for your row's but it wouldn't be responsive. If you use % then you would have to set html, body { min-height 100%; } but the heights of your row's would change when content gets added and the page grows.

Answer 3

You can use absolute to both of the classes and give top as well bottom 0px to each class . Based on your design i have made some adjustment.

.bg-black {
  background: #000000;
  position: absolute;
  bottom: 0px;
  top: 269px;
}
    .bg-white {
  background: #FFFFFF;
  left: 25%;
  position: absolute;
  top: 269px;
  bottom: 0px;
}