angular - 如何将列布局拆分到指定空间并使用 Angular 星云制作不可滚动的容器

Question

我正在使用带有固定标题的 nebular 主题，并尝试拆分具有指定宽度和高度的列。但似乎没有一个能正常工作，因为列布局不受我在本地组件 scss 中的宽度和高度属性的影响。

<nb-layout>
   <nb-layout-column>First</nb-layout-column>
   <nb-layout-column>Second</nb-layout-column>
</nb-layout>

由于我有一个固定的 header ，主体容器再次从 top:0 开始位置，从而使主体容器滚动。所以在这里我想让我的 body 容器在不使用 overflow:hidden 的情况下不滚动

我创建了一个 stackblitz 链接:https://stackblitz.com/edit/github-gv8sej

1. 请检查并帮助我使第一个列宽度占 70%，第二个占 30% 100% of <nb-layout>容器。
2. 如何使我的主页组件在具有固定标题的同时不可滚动。

Answer 1

Nebular布局使用Flex，因此使用flex属性代替width。

nb-layout{
  width:100%;
  height:100%;
}
nb-layout-column:first-child {
  flex: 2 !important;
  background: #e3e6f9;
}
nb-layout-column:last-child {
  flex: 1 !important;
  background: #f4f4f7;
}

滚动是由以下行引起的:

.nb-theme-default nb-layout .layout {
   min-height: 100vh;
}