--- title: 上下布局固定侧边栏和头部 order: 2 iframe: 400 --- 给`Header`和`Aside`分别添加`fixed`属性，即可固定顶部或者侧边栏，组件会自动添加相应样式，无需手动 添加样式 ```vdt import {Layout, Header, Aside, Body, Footer} from 'kpc/components/layout'; import {Menu, MenuItem} from 'kpc/components/menu'; import Icon from 'kpc/components/icon'; import {Breadcrumb, BreadcrumbItem} from 'kpc/components/breadcrumb';
menu 1 menu 2 menu 3 sub menu 1 sub menu 2 sub menu 3 sub menu 4 option 1 option 2 menu 4
Home Detail
content
 ``` ```styl .logo width 160px height 30px line-height 30px text-align center color #fff background gray float left margin 17px 20px .k-breadcrumb margin 20px 0 ``` ```js export default class Demo extends Intact { @Intact.template() static template = template; defaults() { return { expandedKeys: [], selectedKey: '3-1', data: Array.apply(null, {length: 100}), }; } } ``` ```vue-data data() { return { expandedKeys: [], selectedKey: '3-1', data: Array.apply(null, {length: 100}), }; } ``` ```react-methods constructor(props) { super(props); this.state = { expandedKeys: [], selectedKey: '3-1', data: Array.apply(null, {length: 100}), }; } ``` ```angular-properties private expandedKeys = []; private selectedKey = '3-1'; private data = Array.apply(null, {length: 100}); ```