Задать вопрос
gleb_se
@gleb_se
html

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

Здравствуйте.
Я не буду указывать все данные, объясню в общем, думаю будет понятно.
Суть такая, есть div, с параметрами width: 100% и height: 100%, равный экрану браузера.
В него надо разместить div = квадрату, но его стороны или сторона указана строго в процентах, дабы сохранить адаптивность. На пример width: 50% и margin: 10% 0 0 10%;
Я знаю как это сделать используя скрипты, вопрос в том: можно ли это сделать на чистом css?
Заранее спасибо!
  • Вопрос задан
  • 2987 просмотров
1 комментарий
Подписаться 2 Оценить 1 комментарий
Решения вопроса 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%;
}
Ответ написан
9 комментариев
9 комментариев
gleb_se
@gleb_se Автор вопроса
Всем спасибо!
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
VPN приложение на Android
22 нояб. 2024, в 19:15
200000 руб./за проект
Разработать скрипт-парсер для новостного сайта
22 нояб. 2024, в 18:50
30000 руб./за проект
Требуется разработчик Telegram-бота для анализа звонков продаж
22 нояб. 2024, в 18:45
10000 руб./за проект
Ещё заказы