Квадрат DIV, где высота равна области просмотра

Ответ 1

Вы можете сделать это с помощью jquery (или, если хотите, чистого javascript).

С jquery:

<div id="square">
</div>

$(document).ready(function(){
  var height = $(window).height();
  $('#square').css('height', height);
  $('#square').css('width', height);
});

Ответ 2

Существует чистый трюк с использованием чистого CSS, который я наткнулся на:

#square {
width: 100%;
height: 0;
padding-bottom: 100%;
}

Надеюсь, что это поможет.

http://blog.brianjohnsondesign.com/2013/maintain-aspect-ratio-for-html-element-using-only-css-in-a-responsive-design/

Ответ 3

Решение только для CSS: vh единиц

Чтобы изменить размер элемента в соответствии с высотой окна просмотра, вы можете использовать vh units:

vh: 1/100th высоты окна просмотра. [источник MDN]

Пример:

body{margin:0;}

div{
    background:gold;
    height:100vh;
    width:100vh;
}

<div></div>

Ответ 4

CSS3 имеет способ сделать это, используя vw, ширину видового экрана и vh, высоту видового экрана. Используя эти меры, 100vw - это вся ширина окна просмотра, а 100vh - вся высота. Дополнительная информация об относительных значениях css3 и единицах здесь.

Как и в случае с этим, единственная поддержка, однако, для Internet Explorer 9, так что это, вероятно, не то, что вы ищете, но что-то хорошее, чтобы иметь в виду, когда последует последующая поддержка.

Ответ 5

Еще один трюк, с которым я столкнулся, чтобы частично решить эту проблему, для любого, кто наткнулся на эту страницу... Запустите следующий код на странице onload:

$('body').css('font-size',$(window).height()/100)

Это означает, что единица css "em" равна 100-й странице высоты страницы. Теперь вы можете произвольно использовать это в своем файле css для определения размера любого элемента относительно высоты вашего видового экрана. Это более общее, чем другие решения, перечисленные здесь. И, скорее всего, вы хотите, чтобы все элементы вашей страницы учитывали высоту вашего видового экрана. Например, если вы хотите создать свой квадрат, вы можете просто написать:

#square{width:100em;height:100em}

Конечно, вам также придется учитывать это для любого текста на вашей странице (поскольку этот трюк влияет на размер шрифта)

Ответ 6

Вы можете использовать Javascript и получить размер экрана. После этого вы можете установить ширину и высоту соответственно.

window.screen.width и window.screen.height должны работать.

Затем вы можете использовать эту информацию и создать крошечный бит CSS для соответствующей страницы.

Ответ 7

Я не знаю, получаю ли я это правильно, но если вы хотите установить его на 100% о высоте окна просмотра, вы можете легко сделать это в css:

.stuff {
  background:#DDD;
  display:inline-block;
  height: 100vh;
  width : 100vh;
}

Вы можете проверить это здесь

Ответ 8

Это интересно...

Для тех, кто ищет чистый способ CSS, содержащий квадратный div с максимальными размерами:

Ключевым выводом здесь является то, что вы устанавливаете max-width и max-height, устанавливая width и height равными противоположным значениям.

HTML

<div>
</div>

CSS

html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

div {
  background-color: red;
  width: 100vh;
  height: 100vw;
  max-width: 100vw;
  max-height: 100vh;
}

Пример работающего в реальном времени: https://jsfiddle.net/resistdesign/szrv5o19/