如何在 vue3 中将页脚定位到页面底部？

Question

我正在制作我的第一个作品集，当浏览器窗口缩短时，我无法将页脚定位在页面底部，也无法理解边距如何工作/不工作。

应用程序.vue

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import Footer from './components/ComponentFooter.vue'
</script>

<template>
  <div id="topBar">
    <nav>
      <div class="navLeft">
        <RouterLink to="/">LoganCTanner</RouterLink>
      </div>
      <div class="navRight">
        <RouterLink to="/projects">projects</RouterLink>
        <RouterLink to="/hobbies">hobbies</RouterLink>
        <RouterLink to="/contact">contact</RouterLink>
      </div>
    </nav>
  </div>
  <RouterView />
  <Footer />
</template>

<style>
#topBar {
  left: 0;
  top: 0;
  height: 64px;
  width: 100%;
  background-color: black;
}

.navLeft {
  color: white;
}

.navRight {
  position: absolute;
  right: 0;
  top: 0;
}

nav {
  position: relative;
  top: 5px;
  width: 100%;
  font-size: 32px;
}

nav a.router-link-exact-active {
  color: var(--vt-c-white);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  padding: 0 0.5rem;
}

@media (min-width: 1024px) {
}
</style>

ComponentFooter.vue

<script setup lang="ts"></script>

<template>
  <footer>
    <p>have a nice day :)</p>
    <div class="contactIcons"></div>
  </footer>
</template>

<style>
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  max-width: 1280px;
  height: 32px;
  background-color: black;
  color: white;
  display: flex;
  align-items: center;
}

footer > p {
  margin: 0rem 1rem;
}
</style>

base.css

:root {
  --section-gap: 160px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}

body {
  min-height: 100vh;
  position: relative;
  color: var(--color-text);
  background: var(--color-background);
  transition:
    color 0.5s,
    background-color 0.5s;
  line-height: 1.6;
  font-family: neue75;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: scroll;
}

@font-face {
  font-family: neue75;
  src: url(../../public/fonts/NHaasGroteskTXPro-75Bd.ttf);
}

main.css

@import './base.css';

#app {
  max-width: 1280px;
  margin: 0 auto;
  font-weight: normal;
}

nav .navLeft a:first-of-type {
  color: white;
}

nav a{
  text-decoration: none;
  color: darkgray;
  transition: 0.4s;
  padding: 3px;
}

@media (hover: hover) {
  a:hover {
    color: lightgray;
  }
}

在过去的几个小时里，我一直在各种元素上修改

margin

和

position

的各种组合，以及导入页脚组件的位置，但我尝试过的任何方法都不起作用。

目前，它将页脚放置在 lorem ipsum 填充 div 的底部，当我尝试在填充 div 的底部添加边距时，它会延伸页面的底部，但页脚仍保持在最后一行上方的相同位置填充 div 的而不是页面底部。

我试图做的是使用

absolute

而不是

fixed

将页脚放置在底部，并在页脚上方留出一些空间。

Answer 1

好吧，为了解决页脚问题，我们要做的是：

在 ComponentFooter.vue 文件中，我们将确保页脚位于页面底部。我们将告诉它从其父容器获取宽度，这有助于它很好地适应不同的屏幕尺寸。

在 ComponentFooter.vue 文件中：

<template>
    <footer>
        <p>have a nice day :)</p>
        <div class="contactIcons"></div>
    </footer>
</template>

<style>
    footer {
        position: absolute;
        bottom: 0;
        width: inherit; /* Inherit width from parent */
        max-width: 1280px;
        height: 32px;
        background-color: black;
        color: white;
        display: flex;
        align-items: center;
    }

    footer > p {
        margin: 0rem 1rem;
    }
</style>

在你的 App.vue 文件中：

<template>
    <div id="app">
        <div id="topBar">
        <nav>
            <div class="navLeft">
            <RouterLink to="/">LoganCTanner</RouterLink>
            </div>
            <div class="navRight">
            <RouterLink to="/projects">projects</RouterLink>
            <RouterLink to="/hobbies">hobbies</RouterLink>
            <RouterLink to="/contact">contact</RouterLink>
            </div>
        </nav>
        </div>
        <RouterView />
        <Footer />
    </div>
</template>

<style>
    #app {
        position: relative; /* Make sure the parent container is relative */
        padding-bottom: 50px; /* Add some bottom padding to create space for the footer */
    }
</style>

通过这些更改，页脚现在应该很好地位于页面底部，不会与主要内容重叠。根据需要调整填充值，以在内容和页脚之间创建所需的间距。

我希望这能起到作用并帮助您实现您想要的布局