面对的问题是:
1.左右不同高
2.整体高度低于当前窗口高度
页面内容分为上中下结构,然后中间有侧边栏和主体内容。
需求是:当中间的内容不够高的时候,让页面内容能够铺满整个屏幕,当中间内容过高的时候自动将内容称起来显示滚动条,并且将侧边栏和主题内容高度同高
效果1:默认平铺整个屏幕
效果2:当页面内容小于某个值(宽度小于1200、高度小于720)的时候出现滚动条
效果3:中间核心内容固定有最低高度,内容不会被压缩掉
第一种方式:利用浮动/定位
<template>
<div class="box">
<div class="box-header"></div>
<div class="main">
<div class="side"></div>
<div class="content"></div>
</div>
<div class="box-footer"></div>
</div>
</template>
<script>
export default {
data() {
return {
};
}
};
</script>
<style lang="scss">
.box {
// 父级框
height: 100vh; // 默认高度满屏
width: 100vw; // 默认宽度满屏
overflow: auto;
min-width: 1200px; // 最小宽
min-height: 720px; // 最小高
.box-header {
height: 60px;
width: 100%;
border: 1px solid red;
}
.main {
height: calc(100vh - 120px); // 默认中间内容满屏
min-height: 600px; // 当出现滚动条时候内容有最低高度
width: 100%;
border: 1px solid green;
position: relative;
.side {
position: absolute; // 侧边栏浮动固定随高 -- 也可以是 float:left;
width: 200px; // 侧边栏宽度
height: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color:hotpink;
}
.content{
margin-left: 200px; // 除去侧边栏长度
height: 100%;
background-color:yellow;
}
}
.box-footer {
height: 60px;
width: 100%;
border: 1px solid red;
}
}
</style>
第二种方式:使用flex布局
<template>
<div class="box">
<div class="box-header"></div>
<div class="main">
<div class="side"></div>
<div class="content"></div>
</div>
<div class="box-footer"></div>
</div>
</template>
<script>
export default {
data() {
return {
};
}
};
</script>
<style lang="scss">
.box {
// 父级框
height: 100vh; // 默认高度满屏
width: 100vw; // 默认宽度满屏
overflow: auto;
min-width: 1200px; // 最小宽
min-height: 720px; // 最小高
.box-header {
height: 60px;
width: 100%;
border: 1px solid red;
}
.main {
height: calc(100vh - 120px); // 默认中间内容满屏
min-height: 600px; // 当出现滚动条时候内容有最低高度
width: 100%;
border: 1px solid green;
display: flex;
.side {
height: inherit; //侧边栏高度自适应
width: 200px; // 侧边栏宽度
background-color: hotpink;
}
.content {
height: 100%;
width: calc(100vw - 200px);
min-width: 1000px;
background-color: yellow;
}
}
.box-footer {
height: 60px;
width: 100%;
border: 1px solid red;
}
}
</style>