这里以vue-cli初始化的项目为例：
1. body,html
html,
body {
height: 100%;
width: 100%;
}
2. App.vue中
#app {
height: 100%;
width: 100%;
}
3. Home.vue组件
title
.home {
min-width: 1024px; // 设置的最小宽度，小于1024时，会出现滚动条
min-height: 100%;
background-color: #09152C;
display: flex;
flex-direction: column;
.header {
height: 57px;
background-color: red;
color: #ffffff;
display: flex;
align-items: center;
padding: 0 20px;
font-size: 16px;
font-weight: bold;
}
.content {
flex-grow: 1; // 让content高度铺满剩余的home
display: flex; //让里面的直接子元素高度占满整个content
padding: 0 10px 32px;
> div {
width: 100%;
background: yellow;
color: #000;
}
}
}
4.最终效果
此时屏幕宽度小于1024px，出现了横向滚动，这样页面就不会因为太窄而影响到布局
