如何将列布局拆分到指定的空间，并使用角度nebular创建不可滚动的容器

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. 请检查并帮助我将第一列宽度占据整个100％<nb-layout>容器的70％和第二列30％。
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;
}