竖向三栏样式:
<template>
<div class="wrap">
<el-header>Header</el-header>
<div class="left">左边</div>
<div class="right"><Right></Right></div>
<div class="middle">中间</div>
</div>
</template>
<script>
export default {
name: "HomeHtml",
components: {
},
data() {
return {};
},
};
</script>
<style scoped lang="less">
body,
html {
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.container {
position: relative;
height: 100%;
min-height: 100vh; /* 保证在内容不足时也能撑满全屏高度 */
padding: 0;
}
.left,
.right {
position: absolute;
height: 100vh;
top: 0;
width: 33.33%;
}
.left {
left: 0;
background: #ff69b4;
}
.right {
right: 0;
background: #659;
}
.middle {
position: absolute;
left: 33.33%;
right: 33.33%;
height: 100vh;
background: #abc;
overflow-y: auto; /* 添加滚动条,防止内容溢出 */
top: 0;
}
</style>
横向三栏样式:
<template>
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
</template>
<script>
export default {
name: "HomeHtml",
components: {
},
data() {
return {};
},
methods: {},
};
</script>
<style scoped lang="less">
.container {
height: 100vh; /* 父容器高度为视窗高度 */
display: flex;
flex-direction: column; /* 设置主轴方向为垂直 */
justify-content: space-between; /* 两端对齐,使得各盒子之间间距相等 */
}
.box {
flex: 1; /* 盒子自动占据剩余空间,每个盒子占据约1/3的高度 */
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ccc;
box-sizing: border-box;
}
.box1 {
background: #ff69b4;
}
.box2 {
background: #659;
}
.box3 {
background: #abc;
}
</style>