100vh, 50% and responsiveness

Question

I have these stacked div's that are height: 100vh; (polyfills are present). Then inside of that div, I have 8 div's that are are suppose to be a perfect square, i use the width: 0; and padding-left: 25%; trick for that. but I would like to know how can I get the 2 rows to always fit inside the height: 100vh; div and scale down maintaining that 1:1 ratio.

I have supplied a JSFiddle to get started.

Answer 1

I'm not totally sure if this is what you are looking for, but you could set both height and width of .entropy to 25% of viewport height. That way they will always be squared.

You then might want to clear floats every 5th square.

 .wrap { height: 100vh; zoom: 1; } .wrap:after { clear: both; content: "."; display: block; font-size: 0; height: 0; line-height: 0; visibility: hidden; } .entropy { float: left; width: 25vh; height: 25vh; border: 1px solid red; } .entropy:nth-of-type(5n) { clear: left; } .entropy:before { display: inline-block; vertical-align: middle; content: ''; height: 100%; } .entropy p { display: inline-block; vertical-align: middle; } 

 <div class="wrap"> <div class="entropy"> <p> Hello </p> </div> <div class="entropy"> <p> Hello </p> </div> <div class="entropy"> <p> Hello </p> </div> <div class="entropy"> <p> Hello </p> </div> <div class="entropy"> <p> Hello </p> </div> <div class="entropy"> <p> Hello </p> </div> <div class="entropy"> <p> Hello </p> </div> <div class="entropy"> <p> Hello </p> </div> </div> 

---

Edit: An alternative is to do something like this:

.entropy {
    position: relative;
    width: 25%;
    overflow: hidden;
    float: left;
}
.entropy:before {
    content: "";
    display: block;
    padding-top: 25vw;
}

This way centering everything is easier, but you may have to change your HTML a little.

Here an example based on viewport width: jsfiddle .

And here an example based on viewport height: jsfiddle .