Как создать фиксированное левое и верхнее меню, но относительно друг друга?

Question

У меня есть этот макет для HTML страницы с:

1. Верхнее меню
2. Левое меню
3. Содержание div

HTML:

  <div class='body-content app'>
  <div class="top">
    <div  class="info"><div _ngcontent-c17="">Version:1.05.20.20 </div></div>
    <div _ngcontent-c17=""> 
      <a _ngcontent-c17="" class="ui link ng-star-inserted">Setup 1</a>
    | <a _ngcontent-c17="" class="ui link custom-setup-link">Setup 2</a>
    | <a _ngcontent-c17="" class="ui link logout-link"> Log out </a>
      </div>
  </div>

  <div class="side-menu">
      <div *ngFor="let item of items; let i = index">
        Menu # {{i}}
      </div>
  </div>

  <div class="content">
        <div *ngFor="let item of items; let i = index">
        Menu # {{i}}
      </div>
  </div>
</div>

CSS:

.top {
  height: 44px;
  background-color: #0078bf;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 3;
  color:white;
}

.side-menu {
  width:70px;
  position: fixed;
  top: 44px;
  height: calc(100% - 44px);
  background-color: #0078bf;
  z-index: 2;
  color:white;
}

.content
{
  margin-left: 80px;
  margin-top: 54px;
}

.content div{
  padding-left: 80px;
  height: 300px;
  background-color:black;
  margin:10px;
}

Демонстрация кода инициализации . У меня есть задача, чтобы добавить изменение размера шрифта через настройку на пользовательском интерфейсе. Но у меня возникают проблемы с этим, потому что меню имеют фиксированное положение, а верх и высота неизменны в стилях.

Я могу сделать это, пересчитав его и изменив с помощью [style.top], [style.height] или Директива [ngStyle]. Но я хочу получить общее решение с CSS и HTML, если это возможно.

Я также пытался изменить высоту, ширину и поля в единицах em, но это не работает для всех сценариев ios с разным размером шрифтов от 10 до 40 пикселей; Я попытался удалить некоторые стили из CSS, которые помогли мне с изменением размера шрифта.

• высота из класса .top,
• top и ширина из класса .side-menu
• margin-top и margin-left от класса .content
• отступ от дочерних элементов div .content div

Но у меня есть артефакт во время прокрутки. Демонстрация того, что у меня есть .

Answer 1

Использование Sticky - не лучшее решение, которое вы можете попробовать

position :relative; 

Позиция sticky - это то, что вы используете, когда хотите, чтобы элемент прилипал при прокрутке, например, см. this