Блог

РЕДАКТИРОВАТЬ 1 Основываясь на предложениях, я попробовал это:

 .lower-container {
    justify-content: center;
    position: absolute;
    width: 92vw;
//    height: 46vh; <--- no height defined

/* nested for adding classes to change position and height of lower-container */
    .lower-container.lower-full {
      height: 92vh;
      top: 0;
    }

    .lower-container.lower-mid {
      height: 46vh;
      top: 46vh;
    }

    .lower-container.lower-closed {
      height: 1vh;
      top: 91vh;
    }
}

 

На панели «Элементы» я вижу:

Но на панели Стилей у меня есть:

Поэтому, хотя я применяю дополнительный класс, высота не устанавливается, и дополнительный класс не отображается в стилях.

Оригинальный вопрос Я определяю некоторые классы внутри других, подобных этому:

 .lower-container {
    height: 46vh;
    display: flex;
    justify-content: center;
    ...

    .lower-full {
        height: 92vh;
    }
}
 

Затем, когда придет время менять высоту, я сделаю:

     lowerContainerElement.classList.add('lower-full')
 

Но на консоли этот элемент не имеет .нижний-полный стиль на панели»Стили»,
хотя на панели «Элементы» отображается class= «{другие классы} нижний-полный».

Что я делаю не так?

Вы не можете определить селектор CSS внутри другого только с помощью ванильного CSS, вам понадобится такой препроцессор, как SASS.

С помощью CSS вы можете указать свойства, когда элемент имеет только .нижний контейнер или когда в нем есть и то, и другое. Это будет эквивалентом того, что вы пытались выполнить в своем исходном коде.

 .lower-container {
   height: 46vh;
   display: flex;
   justify-content: center;
   ...
}

.lower-container.lower-full {
    height: 92vh;
}
 

Если вы уже используете файлы SCSS, то вы используете неправильный синтаксис

 .lower-container {
    height: 46vh;
    display: flex;
    justify-content: center;
    ...

    amp;.lower-full {
        height: 92vh;
   }
}
 

Редактирование на основе новейшего редактирования: Код должен выглядеть следующим образом:

 .lower-container {
    justify-content: center;
    position: absolute;
    width: 92vw;
//    height: 46vh; <--- no height defined

/* nested for adding classes to change position and height of lower-container */
    amp;.lower-full {
      height: 92vh;
      top: 0;
    }

    amp;.lower-mid {
      height: 46vh;
      top: 46vh;
    }

    amp;.lower-closed {
      height: 1vh;
      top: 91vh;
    }
}