Площадь DIV, где высота равна окну просмотра - PullRequest
Новая
       8

Площадь DIV, где высота равна окну просмотра

43 голосов
/ 14 июля 2011

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

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

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

Ответы [ 8 ]

117 голосов
/ 02 августа 2013

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

31 голосов
/ 13 мая 2014

Только CSS решение: vh единиц

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

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

Пример: 

body{margin:0;}

div{
    background:gold;
    height:100vh;
    width:100vh;
}
<div></div>

FIDdle DEMO

Это сделает ширину и высоту элемента равной высоте области просмотра.

Поддержка Bowser для vh юнитов IE9 +. Подробнее здесь

17 голосов
/ 14 июля 2011

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

С помощью jquery: 

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

$(document).ready(function(){
  var height = $(window).height();
  $('#square').css('height', height);
  $('#square').css('width', height);
});
3 голосов
/ 23 декабря 2011

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

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

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

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

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

3 голосов
/ 14 июля 2011

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

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

0 голосов
/ 21 января 2019

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

Для тех, кто ищет чистый способ 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/

0 голосов
/ 03 декабря 2014

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

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

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

0 голосов
/ 14 июля 2011

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

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

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

...