Responsive Grid Height Issues

Question

So I'm trying to make a responsive grid layout for a web re-design I am working on. I started to lay out some placeholders, which can be found in a jsfiddle here .

The width works great; exactly how I want it to.

.half-cell {

        height:70%;

        width:50%;
        background-color: #458bff;
        float: left;
        display:inline;

        background-size:cover;


        }

        .quarter-cell-horiz {
            height:35%;                
            width:50%;
            float: left;
            display:inline;
            background-color:#373737;

        }

However, I am noticing some issues with my height. I'm noticing that at some heights, the placeholders jump out of place. I figure this is because it can't measure out a perfect 70% at every height, the way it can a 50% width.

I'm trying to find a way I can prevent that from happening, while maintaining a specific ratio with each of my placeholders. Preferably, I would like to do so using CSS.

Any help y'all could provide would be great. Thank you for looking at this!

Answer 1

DEMO

Just like 100% width is equal to windows width we have to make sure height does the same! by applying this css:

html, body{ height: 100%; }

Will make sure that any element that you give height in percentage will depend on window height unless its parent have specific height defined (must be first level child of body).

I have created a class named vertical-row which will create 100% height section which you can then use to define 50% height and so on within it for each row you have. You can go on and make vertical-row-half to take 50% and so on for a vertical grid system.