Как сделать на чистом css div квадратным у которого размеры в процентах и он вложен в div = экрану монитора?

Здравствуйте.
Я не буду указывать все данные, объясню в общем, думаю будет понятно.
Суть такая, есть div, с параметрами width: 100% и height: 100%, равный экрану браузера.
В него надо разместить div = квадрату, но его стороны или сторона указана строго в процентах, дабы сохранить адаптивность. На пример width: 50% и margin: 10% 0 0 10%;
Я знаю как это сделать используя скрипты, вопрос в том: можно ли это сделать на чистом css?
Заранее спасибо!
  • Вопрос задан
  • 2842 просмотра
Решения вопроса 2
Ivanq
@Ivanq
Знаю php, js, html, css
В CSS есть типы vh и vw - высота экрана и его ширина соответственно. Можно для div'а поставить:
width: 50vw;
height: 50vw;
Ответ написан
Комментировать
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<style type="text/css">
		* { margin: 0; padding: 0; }
		html, body { width: 100vh; height: 100vh; }
		.content { height: 100vh; width: 100vh; background: red; }
	</style>
	<div class="content"></div>
</body>
</html>

Оно?
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
ksider
@ksider
Я сварщик не настоящий
есть шикарный хак
.b {
width:20%;
padding-bottom:20%;
}
Ответ написан
gleb_se
@gleb_se Автор вопроса
Всем спасибо!
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
28 апр. 2024, в 17:10
20000 руб./за проект
28 апр. 2024, в 15:00
100000 руб./за проект
28 апр. 2024, в 14:43
5000 руб./за проект