Относительные отступы и единицы измерения vh - ошибка или спецификация?

DEMO

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

Что я хочу:

  • для предотвращения выхода квадрата за пределы области просмотра на устройствах с небольшой высотой, т.е. на мобильных телефонах в альбомной ориентации

Предложенное решение

  • ограничить ширину квадрата в процентах от высоты области просмотра, используя max-width: 90vh
  • ожидайте, что отношение будет соблюдаться

CSS

    .square {
      position: relative;
      height: 0;
      padding-bottom: 100%;
      overflow: hidden;
    }

    .square-inner {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    .mw { max-width: 90vh;} /* solution, but makes things break */

HTML

    <div class="square mw">
        <div class="square-inner"></div>
    </div>

Что должно произойти

  • в окнах просмотра с небольшой высотой квадрат должен иметь максимальную ширину 90% от высоты окна просмотра

Что на самом деле происходит:

  • когда высота окна просмотра меньше ширины квадрата:
    • ширина ограничена согласно vh значение
    • высота рассчитывается по ширине квадрата, если бы она не была ограничена vh
    • мы получаем вертикально длинный прямоугольник

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

Поведение браузера:

  • Chrome 29.0.1547.65: как описано
  • Firefox 23.01: как описано
  • Opera: вообще не уважает vh Не проверено с Opera 16+

Я неправильно интерпретирую спецификацию, или это возможная ошибка в реализации поставщиками браузеров?

Источник

2 ответа

Решение

Проблема заключается в использовании обеих длин в% и vh.

Попробуй это:

Рабочий пример

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: sans-serif;
  font-weight: 100;
}

.neat {
  width: 50%;
  max-width: 600px;
  min-width: 320px;
  margin: 0 auto;
}

.col {
  float: left;
  padding: 2rem;
  width: 90vh;    /*** Important bit changed width:50%; to width:90vh; ***/
  max-width: 50%; /*** Important bit added max-width:50%; ***/
}

.square {
  position: relative;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
}

.square-inner {
  position: absolute;
  background-color: #333333;
  color: white;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
}

.mw {
  max-width: 90vh;
}
Источник

Я не думаю, что Opera поддерживает VH, и есть известные проблемы. Мне интересно, влияет ли эта ошибка на то, что вы видите: http://code.google.com/p/chromium/issues/detail?id=124331.

Источник
Другие вопросы по тегам