Не работает height css

285

26 августа 2017, 00:14

Всем привет. Есть блок меню, которое выезжает, блок лежит непосредственно в 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? На выходе получаю такое чудо:

Answer 1

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

Answer 2

Выстоты в процентах работают только если у родительского элемента есть фиксированная высота. Убедись, что просто 100% работает.
Вокруг знаков + и - должны стоять пробелы: calc(100% - 65px).
Убедись, что к элементу применяется этот стиль и он ничем не переопределён.