Как объяснить блоку, что бы он стал квадратным?

Question

[Тимофей Михайлов]

Вопрос собственно вот в чём ....
Я не очень понимаю, каким образом сделать так, что бы блок div имел height: 100%;
И при этом, его ширина, была равна высоте?Я понимаю, как это сделать при помощи JS.
Но мне интересно, можно ли обойтись лишь возможностями CSS ?
Спасибо

Answer 1

[Анатолий]

.block {
    height: 100vh;
    width: 100vh;
}

Comments

[Тимофей Михайлов]

спасибо! Помогло!

Answer 2

[Stalker_RED]

Для всех обычных способов сделать квадратный блок характерна зависимость от ширины, а не высоты. Все сложности в height: 100%.

Comments

[Тимофей Михайлов]

Если у вас прямоугольный монитор, правильный четырёхугольник с максимальной площадью, у вас получится только в случае, если вы за константу примете высоту монитора.
Или я что-то путаю?

[Stalker_RED]

Тимофей Михайлов, можно начать с того, что height: 100% далеко не всегда будет равняться высоте монитора или 100vh.

[Тимофей Михайлов]

Stalker_RED, что вы предлагаете? Я весь во внимании

[Stalker_RED]

Тимофей Михайлов, я ничего не предлагаю. При текущей постановке вопроса простого однозначного ответа нет.
Если вы страницу с блоком height: 100vh; width: 100vh; откроете на мониторе с альбомной ориентацией догадываетесь что произойдет?

[Тимофей Михайлов]

Stalker_RED, я не догадывался. Но попробовал. Теперь вроде бы понимаю к чему вы клоните.
У меня есть идея,
при помощи JS проверять что меньше height, или width. И уже в зависимости от результата, назначать значения. Но возможно это сделать только при помощи css ?

[Stalker_RED]

Тимофей Михайлов, что "ЭТО"? При текущей постановке вопроса можно целый день примерами перебрасываться. Вот вам еще один:

https://jsfiddle.net/1utqzmyp/

Что из этого 100%?

[Тимофей Михайлов]

Stalker_RED, я не понял, что вы хотите мне сказать... Я вот это имел в виду.

<script>
	window.onload = function()
	{
		var w = window.innerWidth;
	    var h = window.innerHeight;
	    var elem = document.getElementById("main");

	    var k;
	    if(w>=h){ k = h; }
	    else 	{ k = w; }

	    elem.style.width = k+"px";
	    elem.style.height = k+"px";
	}

</script>

[Stalker_RED]

Тимофей Михайлов, спасибо, так намного понятнее. Не уверен, что вам подойдет, но попробуйте: https://jsfiddle.net/mg5btrev/