vue3前端实现全屏显示,元素垂直填满页面
1、 toggleFullscreen方法实现选定元素全屏展示
2、使用flex属性+ flex-direction 实现垂直布局填满整个页面
全屏
body {
margin: 0;
}
/* 使用flex布局 */
.container {
display: flex;
flex-direction: column;
height: 100vh;
/* 确保容器元素的高度与视口高度一致 */
}
/* 设置上部元素 */
.header {
border: 1px solid green;
height: 100px;
/* 上部元素的高度 */
background-color: #ccc;
/* 上部元素的样式 */
}
/* 设置下部元素 */
.content {
border: 1px solid yellow;
flex-grow: 1;
/* 下部元素占据父元素的剩余空间 */
background-color: #eee;
/* 下部元素的样式 */
}