1. 使用视口单位
.element {
height: 100vh; /* 使得元素高度等于视口高度的100% */
/* 可以减去一部分高度以适应页眉或页脚 */
height: calc(100vh - 100px);
}
2. 使用百分比(%)高度
.parent {
height: 100vh; /* 父元素高度等于视口高度 */
}
.child {
height: 50%; /* 子元素高度为父元素高度的50% */
}
3. 使用Flexbox或Grid布局
.container {
display: flex;
flex-direction: column; /* 垂直布局 */
height: 100vh;
}
.content {
flex: 1; /* 占据剩余空间 */
}
4. 监听窗口大小变化
export default {
data() {
return {
windowHeight: window.innerHeight
};
},
created() {
window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
},
methods: {
handleResize() {
this.windowHeight = window.innerHeight;
// 这里可以执行更多基于新窗口高度的操作
}
}
}
5. 使用媒体查询
@media (max-height: 600px) {
.element {
height: auto; /* 在小屏幕上使用不同的高度策略 */
}
}