一、 上中下
<template>
<div class="layout" id="layout" ref="layout" :style="`width:${width}px;height:${height}px`">
<div class="layout-header" :style="`width:${width}px;height:${headerHeight}px`"></div>
<div class="layout-main" :style="`width:${width}px;height:${mainHeight}px`">
<div class="layout-main-content">
<div v-for="i in 100" :key="i">{{i}}</div>
</div>
</div>
<div class="layout-footer" :style="`width:${width}px;height:${footerHeight}px`"></div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({
components: {}
})
export default class Layout extends Vue {
height = 0
width = 0
headerHeight = 60
mainHeight = 0
footerHeight = 10
mounted() {
this.$nextTick(() => {
this.width = window.innerWidth
this.height = window.innerHeight
this.mainHeight =
this.height - this.headerHeight - this.footerHeight
})
window.onresize = () => {
return (() => {
this.width = window.innerWidth
this.height = window.innerHeight
this.mainHeight =
this.height - this.headerHeight - this.footerHeight
})()
}
}
}
</script>
<style lang="scss" scoped>
.layout {
background: darkcyan;
.layout-header {
background: darkgoldenrod;
}
.layout-main {
background: darkorchid;
overflow-y: auto;
white-space: nowrap;
.layout-main-content {
width: 100%;
white-space: nowrap;
// justify-content: flex-start;
// display: flex;
// align-items: center;
}
}
.layout-footer {
background: darkseagreen;
}
}
</style>
- 可以直接设置header的高度
- 可以直接设置footer的高度
- main里面的内容写到content里面，进行滚动条滚动
二、 左 右（上中下）
<template>
<div class="layout" id="layout" ref="layout" :style="`width:${width}px;height:${height}px`">
<div class="layout-left" :style="`width:${leftWidth}px;height:${height}px`">
<div class="layout-left-logo" :style="`width:${leftWidth}px;height:${headerHeight}px`"></div>
<div class="layout-left-menu" :style="`width:${leftWidth}px;height:${mainHeight+footerHeight}px`"></div>
</div>
<div class="layout-right" :style="`width:${rightWidth}px;height:${height}px`">
<div class="layout-header" :style="`width:${rightWidth}px;height:${headerHeight}px`"></div>
<div class="layout-main" :style="`width:${rightWidth}px;height:${mainHeight}px`">
<div class="layout-main-content">
<div v-for="i in 100" :key="i">{{i}}</div>
</div>
</div>
<div class="layout-footer" :style="`width:${rightWidth}px;height:${footerHeight}px`"></div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({
components: { }
})
export default class Layout extends Vue {
height = 0
width = 0
leftWidth = 100
rightWidth = 0
headerHeight = 100
mainHeight = 0
footerHeight = 0
mounted() {
this.$nextTick(() => {
this.width = window.innerWidth
this.height = window.innerHeight
this.mainHeight =
this.height - this.headerHeight - this.footerHeight
this.rightWidth = this.width - this.leftWidth
})
window.onresize = () => {
return (() => {
this.width = window.innerWidth
this.height = window.innerHeight
this.mainHeight =
this.height - this.headerHeight - this.footerHeight
this.rightWidth = this.width - this.leftWidth
})()
}
}
}
</script>
<style lang="scss" scoped>
.layout {
background: darkcyan;
display: flex;
.layout-left {
background: rgb(224, 123, 123);
.layout-left-logo {
background: rgb(107, 202, 150);
}
.layout-left-menu {
background: rgb(107, 145, 202);
}
}
.layout-right {
background: rgb(200, 247, 114);
.layout-header {
background: darkgoldenrod;
}
.layout-main {
background: darkorchid;
overflow-y: auto;
white-space: nowrap;
.layout-main-content {
width: 100%;
white-space: nowrap;
// justify-content: flex-start;
// display: flex;
// align-items: center;
}
}
.layout-footer {
background: darkseagreen;
}
}
}
</style>
