Question

有没有办法创建一个完美的方形div，其边等于document.body的最小边？文档的宽度或高度。它必须要有回应。

Answer 1

试试这个：

.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>

Answer 2

我想我找到了解决方案。对不起，我刚刚在之前的评论中意识到，它并不适合我，因为正文有默认的保证金。

＆＃13;

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

＆＃13;

创建一个完美的方形div响应

2 个答案: