华为云首页用户手册 H

华为云Astro轻应用-路由导航和路由视图:自定义布局样式

时间：2025-02-12 14:58:39

华为云Astro轻应用

自定义布局样式

如果导航页面，想实现如下图所示布局效果，即整个页面不需要有滚动条，而其中导航组件区域和全局路由视图组件区域可随滚动条滚动时，可参考如下步骤实现。

图13 自定义布局样式页面效果

在头部组件的“.css”样式文件中，指定头部组件的高度。

样例代码如下：
```
#headerWidget {              height: 90px;}
```
参考基于预置组件进行自定义中操作，下载预置组件路由导航(示例)，解压global_NavigatorWidget.zip。

修改解压后的“Navigator_Widget.css”文件，该文件是Widget的样式文件，在该文件中编写Widget的css样式。

样例代码如下：

html[app=desktop] body {              overflow: hidden;} #navigatorWidget, #global_RouterViewWidget {              height: calc(100% - 90px);              overflow: scroll;}