Question

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

<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

请检查并帮助我使第一列宽度占据<nb-layout>容器总数的100％的70％，第二到30％。
如何在具有固定标题的情况下使home组件不可滚动。

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

如何将列布局拆分到指定的空间，以及如何使用角形星云制作不可展开的容器

1 个答案: