滚动边距顶部不适用于邮件布局答案

【问题标题】：scroll-margin-top not working on mail layout滚动边距顶部不适用于邮件布局
【发布时间】：2021-06-01 18:07:07
【问题描述】：

在我的 Angular 应用程序中，我有一个管理模板页面布局，如下图所示：

我设置.content-wrapper、body和html如下图：

html, body { 
  height: 100%; 
  overflow-y: hidden;
}

.content-wrapper {
  overflow-y: scroll;  
  height: calc(100vh - 70px);
  scroll-margin-top: 100px;
}

这是我app.component.html中的布局：

<app-header></app-header>
<app-sidebar></app-sidebar>
<div class="content-wrapper">
  <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

有一个与滚动条顶部有关的问题。如图所示，它似乎位于标题底部的标题下方。我只是尝试设置scroll-margin-top，以便将滚动条的顶部移动到标题的底部。但这没有任何意义。

解决这个问题的正确方法是什么？

【问题讨论】：

尝试使用 .content-wrapper 的 'display' 属性，否则 stackblitz 会有所帮助

标签： html css angular twitter-bootstrap templates

【解决方案1】：

一种解决方案是使用 inline-flex 显示属性，将边宽设置为 70vw 减去 10px，右侧区域设置为 30vw 减去 14.4px。

html, body { 
  height: 100%; 
  overflow-y: hidden;
  box-sizing:border-box;
}

header, footer {
  border:1px solid black;
  height:20px;
}

aside {
  border:1px solid black;
  display:inline-flex;
  width:calc(70vw - 10px);
  height: calc(100vh - 80px);
}

.content-wrapper {
  overflow-y: scroll;
  height: calc(100vh - 80px);
  display:inline-flex;
  border:1px solid red;
  width:calc(30vw - 14.4px);
}

<header>&nbsp;</header>
<aside>&nbsp;</aside>
<div class="content-wrapper">
  <div>&nbsp;</div>
</div>
<footer>&nbsp;</footer>

【讨论】：