Блог

У меня есть свернутое меню с динамическим количеством элементов (зеленые плитки на изображении)

У меня также есть фиксированный элемент, который должен быть в нижней части меню — всегда.

Это работает нормально, но теперь пункты меню иногда отключаются на полпути в зависимости от размера экрана. Как мне убедиться, что я скрываю элементы, которые вырезаны наполовину?

Я прикрепил изображение, которое это ясно объясняет.

Я знаю, что могу сделать это с помощью JavaScript, но я ищу CSS-решение, если оно существует. Если такого решения не существует, это тоже ответ.

Мультимедийные запросы позволят вам задать определенный стиль для разных размеров мультимедиа (ширина и высота экрана устройства)

медиа-запросы широко используются в таких фреймворках, как bootstrap и подобных, и считаются CSS-решением.

для получения дополнительной информации: Адаптивный веб-дизайн

таким образом, вы сможете скрыть определенный элемент выбора с помощью простого display: hidden , и это повлияет на элемент только в пределах этого носителя.

например:

 .div {
  height: 80px;
  color: black;
}

@media screen and (max-width: 995px) , screen and (max-height: 700px) {
  .div {
    color: white;
  }
}
@media screen and (max-width: 678px) , screen and (max-height: 300px) {
  .div {
    color: blue;
  }
}
  

это сохранит высоту, но изменит цвет при каждом запросе.

надеюсь, мое объяснение понятно.

вы также можете использовать !важно при каждом изменении, если вы не хотите нарушать порядок загрузки css, т.е color: white !important;

и это переопределит любой цветовой стиль до того, как этот был объявлен.