Блог

Мне могла бы понадобиться помощь в решении этой проблемы с css. В принципе, у меня есть 3 раздела.

 div class="app-container">
    <div class="menu">
    </div>
    <div class="content">
    </div>
</div
  

div меню должно содержать мое меню. Он должен отображаться с левой стороны с фиксированной шириной. Высота также должна быть 100%.

Содержимое div должно использовать оставшуюся доступную ширину.

Вот как сейчас выглядит мой сайт.

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

Вот как это выглядит, когда контента намного больше. (вы можете видеть справа, что я прокрутил вниз)

Код

 html, body {

}

.app-container {

}

.menu {
  height: 100%;
  width: 16rem;
  top: 0;
  left: 0;
  background-color: #2D3E50;
  color: white;
  padding: 1rem;
  position: absolute;
}

.content {
  padding: 1rem;
  padding-left: 17rem;
  background-color: white;
  height: 100%;
}
  

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

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

Обновить

Попробуйте использовать position: relative; для body и position: absolute; для вашего элемента меню. Установите высоту меню на 100%.