How to create a fixed left and top menu, but relative to each other?

Question

I have this layout for an HTML page with :

1. Top menu
2. Left menu
3. Content 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;
}

A demo of init code. I have a task to add font resizing via setup on UI. But I am having problems doing it, because menus are position fixed and top and height is constant in styles.

I can do it by recalculating it and changing using [style.top], [style.height] or [ngStyle] directive. But I want to get common solution with CSS and HTML, if it is possible.

I was also trying to change height, width and margin to em units, but it's not working for all scenarios with different size of fonts from 10px to 40px; I tried to remove some styles from the CSS that helped me with font-resizing.

• height from .top class,
• top and width from .side-menu class
• margin-top and margin-left from .content class
• padding from children divs of .content div

But I have an artifact during scrolling. A demo of what I have.

Answer 1

Using Sticky is not best solution you can try

position :relative; 

Position sticky is something you use when you want a element to sticky while scrolling for example refer this