VUE前端开发Tips---001

VUE前端开发Tips---001

VUE页面分为两部分，上半部分固定高度，下半部分占据剩余全部高度

1.html部分

<template>
  <div class="wrapper">
    <div class="top"></div>
    <div class="bottom">></div>
  </div>
</template>

2.css部分

.wrapper {
    width: 100%;
    height: 100%;
}
.top {
    width: 100%;
    height: 0.9rem;
    background: red;
}
.bottom {
    width: 100%;
    height: calc(100% - 0.9rem);
    overflow-y: scroll;
    background: green;
}

想要实现效果，需要用到calc函数，其中使用高度的100%减去上半部分的高度，剩余的部分就是下半部分的高度。

高度100%生效需要父容器必须具有具体的高度信息

高度生效请移步https://blog.csdn.net/huitoukest/article/details/51375345