如何创建固定的左右菜单,但彼此相对?

问题描述 投票:0回答:2

我的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;
}

A demo of init code。我的任务是通过UI上的设置来添加字体大小调整。但是我在执行此操作时遇到了问题,因为菜单的位置是固定的,样式的顶部和高度是恒定的。

我可以通过重新计算并使用[style.top],[style.height]或[ngStyle]指令进行更改来实现。但是,如果可能的话,我想获得CSS和HTML的通用解决方案。

我还试图将高度,宽度和边距更改为em单位,但不适用于所有字体大小从10px到40px的情况。我试图从CSS中删除一些样式,这些样式有助于调整字体大小。

  • 。top类的高度,
  • 。side-menu类的顶部和宽度
  • 。content类的margin-top和margin-left
  • 从.content div的子div填充

但是我在滚动时有伪像。 A demo of what I have

html css angular
2个回答
0
投票

使用粘性不是您可以尝试的最佳解决方案


0
投票

我在这里找到了css示例的问题之一的解决方案

.top
{
  postittion: sticky;
  top: 0;
}

Solution of problem

但是我不知道如何从内容div中删除左边距

© www.soinside.com 2019 - 2024. All rights reserved.