Gridsome(四)：完善简易博客网站 (内有 footer 不满一屏时在最底部，超出一屏时在页面最底部 解决方案)

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>
    <div v-for