How to remove the gaps between borders of adjacent div s and make their border heights the same as the page?

Question

I would like to create a page that looks like below:

and currently my code results in a page like this:

There are gaps between the bottom border of differ