主体内容不够时,尾部紧贴着主体,看起来丑急了:
预期效果:
这样的效果是不是好很多?!
我以 vue 项目为例,演示下 css 要怎么写:
代码:
<template>
<div class="app">
<div class="appContainer">
<Roof></Roof>
<router-view></router-view>
</div>
<Tail class="tail"></Tail>
</div>
</template>
<script>
import Roof from "@/views/components/roof";
import Tail from "@/views/components/tail";
export default {
name: "app",
components: {
Roof,
Tail,
},
};
</script>
<style lang="scss" scoped>
.app {
min-width: 1280px;
.appContainer {
min-width: 1280px;
min-height: calc(100vh);
padding-bottom: 70px;
}
.tail {
margin-top: -70px;
}
}
</style>