我正在使用带有固定标题的 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
- 请检查并帮助我使第一个列宽度占 70%,第二个占 30% 100% of
<nb-layout>
容器。 - 如何使我的主页组件在具有固定标题的同时不可滚动。
最佳答案
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;
}
关于angular - 如何将列布局拆分到指定空间并使用 Angular 星云制作不可滚动的容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54945474/