Question

I am working on a web app that will generate an NxN grid based on the user’s selection of N. I want the total width of the grid to be relative (ie 100% of the available space) so that users can print on various paper sizes.

I can easily calculate the width of the squares in the grid by % (ie: 100%/N), but I am having issues calculating the height. The height of a web page is always going to be infinite unless I artificially limit it which, like I said, I don’t want to do.

How can I make the squares in my grid be square versus rectangular when the height and width constraints of my grid are dynamic and not square?

Answer 1

This is un-tested, I do not know of how to do this in CSS only, I would use jQuery.

$('div').height($('div').width());