Square DIV where height is equal to viewport

html css aspect-ratio css-shapes
Ila picture Ila · Jul 14, 2011 · Viewed 49.1k times · Source

I need to create a DIV where width=height, and height=100% of the viewport (which, obviously, is variable).

In other words, a perfectly square DIV that calculates it's dimensions based on the height of the viewport. Elements within that DIV will take their dimensions as percentages of the parent-DIV's height & width.

It seems to me like this should be simple to do in CSS, but I've gotten stuck with it! Any pointers would be much appreciated.

Answer

Tomasz Kowalczyk picture Tomasz Kowalczyk · Aug 2, 2013

There is a neat trick using pure css that i stumbled upon:

#square {
width: 100%;
height: 0;
padding-bottom: 100%;
}

Hope that helps.

http://blog.brianjohnsondesign.com/2013/maintain-aspect-ratio-for-html-element-using-only-css-in-a-responsive-design/

Related questions

Maintain the aspect ratio of a div with CSS

I want to create a div that can change its width/height as the window's width changes. Are there any CSS3 rules that would allow the height to change according to the width, while maintaining its aspect ratio? I know …

Read More
Grid of responsive squares

I'm wondering how I would go about creating a layout with responsive squares. Each square would have vertically and horizontally aligned content. The specific example is displayed below...

Read More
Maintain aspect ratio of div but fill screen width and height in CSS?

I have a site to put together that has a fixed aspect ratio of approximately 16:9 landscape, like a video. I want to have it centred and expand to fill the available width, and the available height, but never to grow …

Read More