我的HTML页面具有以下布局:
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中删除一些样式,这些样式有助于调整字体大小。
但是我在滚动时有伪像。 A demo of what I have。
使用粘性不是您可以尝试的最佳解决方案