1

Всем привет. Есть блок меню, которое выезжает, блок лежит непосредственно в body.

.menu_mobile {
height: calc(100%-65px);
display: none;
.sm(display, block);  //свои примеси, less, все дела
transition: .25s;
width: 100%;
position: fixed;


top: -100%;
left: 0;
background-color: red;
box-sizing: border-box;
border-bottom: 5px solid green;
  &-active {
      top: 65px;
  }
}

Вопрос: почему не работает height: calc? На выходе получаю такое чудо: бред с calc

4
  • Если это LESS, то есть вероятность, что он считает 100%-65px и получает 35px (да-да, именно так!). Пожалуйста, дайте полный пример и настройки вашего lessc (или gulp или webpack или less.js или что там у вас), чтобы мы могли воспроизвести вашу проблему и ответить точнее
    – andreymal
    24 авг 2017 в 15:20
  • Кстати, скриншот из веб-инспектора с выделенным проблемным элементом и CSS-атрибутами тоже не помешает, а то я могу оказаться не прав
    – andreymal
    24 авг 2017 в 15:23
  • @andreymal Юзаю gulp-less из npm, до этого никаких проблем не было, компиляция идет нормально. 24 авг 2017 в 15:29
  • "Никаких проблем" понимать как "раньше calc всегда работал"?
    – andreymal
    24 авг 2017 в 16:23

2 ответа 2

1

добавьте пробелов height: calc(100% - 65px)

2
  • не помогло, насколько я знаю, пробелы тут не столь важны. 24 авг 2017 в 15:30
  • 1
    @Alexxosipov, пробелы как раз тут важны. Стандарт требует, чтобы + и - в calc были окружены пробелами.
    – Qwertiy
    24 авг 2017 в 15:36
0
  1. Выстоты в процентах работают только если у родительского элемента есть фиксированная высота. Убедись, что просто 100% работает.

  2. Вокруг знаков + и - должны стоять пробелы: calc(100% - 65px).

  3. Убедись, что к элементу применяется этот стиль и он ничем не переопределён.

5
  • 1. родительский элемент - body 2. Сделано 3. Все верно 24 авг 2017 в 17:27
  • 1. это не важно, если стилей для него нет.
    – Qwertiy
    24 авг 2017 в 17:32
  • 1
    @Alexxosipov, html, body { height: 100%; margin: 0; } добавь.
    – Qwertiy
    24 авг 2017 в 17:42
  • Добавил, ничего не изменилось. Понял, что проблема именно в calc, поскольку если поставить height 100%, все работает правильно. 24 авг 2017 в 23:18
  • Разобрался. И правда, проблема именно в less компиляторе. Он компилирует calc(100% - 65px) как calc(35%) 24 авг 2017 в 23:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.