У меня есть проблема, когда у меня есть два div, которые происходят от одного и того же класса, но с разными идентификаторами. Отобразится только та страница, которая определена в HTML-коде первой (следующее изображение показывает, как выглядит страница, когда leftMenu создается первой).

Webpage when leftMenu is defined first

Вот код HTML, который размещает элементы div:

<body>
    <div class = "sideMenu" id = "leftMenu">
        leftMenu
    </div>
    
    <div class = "sideMenu" id = "rightMenu">
        rightMenu
    </div>
</body>

Я предполагаю, что моя проблема заключается в отсутствии опыта работы с каскадными таблицами стилей, поэтому я включил весь код в свой файл .css:

* {
    background-color: #001005;
    color: #00aa00;
    font-family: consolas;
    margin: 0px;
    overflow: hidden;
    padding: 0px;
    position: relative;
} /* default attributes for all elements */

.sideMenu {
    background-color: #00200a;
    border: 2px solid #00aa00;
    border-bottom: 0px;
    border-top: 0px;
    min-width: 15vw;
    max-width: 20vw;
    overflow-y: visible;
    width: fit-content;
    height: 100vh;
}  /* shared attributes of side menus */

#leftMenu {
    left: 0vw;
    top: 0vh;
} /* attributes for the left menu */

#rightMenu {
    left: 100vw;
    top: 0vh;
    transform: translate(-100%, 0%);
} /* attributes for the right menu */

Вроде бы все должно работать нормально, но это не так. Извините, если это действительно просто, прошли годы с тех пор, как я коснулся HTML, CSS или JS.

0
TheAngriestCrusader 26 Янв 2022 в 14:04

2 ответа

Лучший ответ

Ваш текущий код устанавливает все позиции правильно, но по-прежнему использует position: relative по умолчанию, что означает, что правая навигация будет расположена ниже левой навигации (и вне экрана, поскольку левая навигация 100vh)

Предполагая, что вы хотите, чтобы ваши навигаторы были видны в любой позиции прокрутки на странице, я бы рекомендовал использовать: position: fixed;

* {
  background-color: #001005;
  color: #00aa00;
  font-family: consolas;
  margin: 0px;
  overflow: hidden;
  padding: 0px;
  position: relative;
}

.sideMenu {
  position: fixed;
  background-color: #00200a;
  border: 2px solid #00aa00;
  border-bottom: 0px;
  border-top: 0px;
  min-width: 15vw;
  max-width: 20vw;
  overflow-y: visible;
  width: fit-content;
  height: 100vh;
}

#leftMenu {
  left: 0vw;
  top: 0vh;
}

#rightMenu {
  left: 100vw;
  top: 0vh;
  transform: translate(-100%, 0%);
}
<body>
  <div class="sideMenu" id="leftMenu">
    leftMenu
  </div>

  <div class="sideMenu" id="rightMenu">
    rightMenu
  </div>
</body>
1
DBS 26 Янв 2022 в 14:10
Да, я понял, что был тупым за секунды до того, как вы ответили, но вы включили код, поэтому вы отмечены как ответ, чтобы помочь другим, которые ТАКЖЕ тупые, как я. Большое спасибо!
 – 
TheAngriestCrusader
26 Янв 2022 в 14:12

Добавление position: fixed в мой класс .sideMenu устранило проблему (каламбур). Я подумал о том, как относительный будет работать здесь, и немного запутался.

Как я узнал, кто-то еще ответил на вопрос с этим точным изменением, но с включенным кодом, поэтому они получат ответ.

0
TheAngriestCrusader 26 Янв 2022 в 14:10