如何将列布局拆分为指定的 space 并使用 angular nebular 制作不可滚动的容器

Question

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

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

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

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

请检查并帮助我使第一列宽度占 70%，第二列占 30%，总共占 <nb-layout> 个容器的 100%。
如何使我的主页组件在固定的情况下不可滚动 header。

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

如何将列布局拆分为指定的 space 并使用 angular nebular 制作不可滚动的容器

How to split column layouts to specified space and to make a unscrollable container using angular nebular

html

css

layout

angular

nebular