Create A Perfect Square Div Responsive
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;
}<div class="outer">
<div class="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>
<body style="padding: 0; margin: 0;">
<div style="width: 100vmin; height: 100vmin; background-color: #333; margin: 0 auto;"></div>
</body>
</html>
Post a Comment for "Create A Perfect Square Div Responsive"