Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Create A Perfect Square Div Responsive

Post a Comment
Is there a way to create a perfect square div whose sides are equal to the smallest side of document.body? Either the width or height of the document. And it must to be responsive.

Solution 1:

Try this:

.outer {
	width:100%;
	height:0;
	padding-top:100%;
	position:relative;
	background:#eee;
}

.inner {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
}
<divclass="outer"><divclass="inner"></div></div>

Solution 2:

I think I've found my solution. Sorry, I just realized in my previous comment, it wasn't working for me because the body has a default margin.

<html><head></head><bodystyle="padding: 0;    margin: 0;"><divstyle="width: 100vmin; height: 100vmin; background-color: #333; margin: 0 auto;"></div></body></html>

Post a Comment for "Create A Perfect Square Div Responsive"