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

Мне нужно создать DIV, где width=height и height=100% windows просмотра (что, очевидно, является переменной).

Другими словами, идеально квадратный DIV, который вычисляет его размеры в зависимости от высоты windows просмотра . Элементы внутри этого DIV будут принимать свои размеры в процентах от высоты и ширины родительского DIV.

Мне кажется, что это должно быть просто сделать в CSS , но я застрял с ним! Любые указатели будут высоко оценены.

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

С jquery:

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

Существует чистый трюк с использованием чистого 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/

Только CSS-решение: vh units

Чтобы resize элемента в соответствии с высотой windows просмотра, вы можете использовать единицы vh:

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


Пример:

 body{margin:0;} div{ background:gold; height:100vh; width:100vh; } 
 

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Поворот изображения canvasа HTML5
  • HashSet по сравнению с словарем wrt время поиска, чтобы узнать, существует ли элемент
  • Как предотвратить автоматическое заполнение роботами формы?
  • Как получить img / src или a / hrefs с помощью Html Agility Pack?
  • LaTeX, HTML / CSS / XML или что-то еще, чтобы создать резюме?
  • Лучший способ справиться с безопасностью и избежать XSS с введенными пользователями URL-адресами
  • Как изменить стиль атрибута title внутри тега привязки?
  • Откройте прямой файл на жестком диске из Firefox (файл: ///)
  • Как изменить программу по умолчанию, используемую Outlook 2010 для отображения источника электронной почты?
  • .class конкретный поиск и замена
  • iframe с внешней страницей не работает
  • Давайте будем гением компьютера.