footer 置于页面的底部
利用绝对定位
/* 文件目录:src/layouts/Defaults.vue */
.footer {
color: #c5c5c5;
position: absolute;
bottom: 0;
}
但是当页面内容超过一屏时,就会出现问题。
我们希望:footer 不满一屏时在最底部,超出一屏时在页面最底部。
<div class="layout">
<header class="header">
<!-- header 内容 …… -->
</header>
<div class="page">
<slot />
</div>
<footer class="footer">
<!-- footer 内容 …… -->
</footer>
</div>
.layout {
position: relative;
min-height: 100%;
}
.page {
padding-bottom: 45px;
}
.footer {
color: #c5c5c5;
position: absolute;
bottom: 20px;
height: 25px;
}
优化博客列表显示
<!-- 文件目录:src/pages/Index.vue -->
<template>
<Layout>
<h1>My Blog</h1>