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

Question

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

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

由于我有一个固定的标题，所以正文容器再次从该top:0位置开始，因此使正文容器滚动。所以在这里我想让我的身体容器不使用overflow:hidden它就不会滚动。

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

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

Answer 1

星云布局使用 Flex，因此，使用 flex 属性而不是宽度。

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