时间戳

首页 > 解决方案 > 滚动边距顶部不适用于邮件布局

html - 滚动边距顶部不适用于邮件布局

问题描述

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

布局

我设置了.content-wrapper，如下图：bodyhtml

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以将滚动条的顶部移动到标题的底部。但这没有任何意义。

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

标签： htmlcssangulartwitter-bootstraptemplates

解决方案

一种解决方案是使用 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>

推荐阅读