Как разместить нижний колонтитул внизу страницы в vue3? ⇐ CSS

[Anonymous]

Я работаю над своим первым портфолио, и у меня возникли проблемы с размещением нижнего колонтитула внизу страницы, когда окно браузера укорочено, а также с пониманием того, как работают/не работают поля. p>
App.vue

Код: Выделить всё

import { RouterLink, RouterView } from 'vue-router'
import Footer from './components/ComponentFooter.vue'






LoganCTanner

projects
hobbies
contact








#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) {
}

ComponentFooter.vue

Код: Выделить всё

have a nice day :)





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;
}

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;
}
}

Последние несколько часов я возился с различными комбинациями полей и положения для различных элементов, а также над тем, где я импортирую нижний колонтитул. компонент, но ничего из того, что я пробовал, не помогло.
В настоящее время нижний колонтитул помещается поверх нижней части div-заполнителя lorem ipsum, и когда я пытаюсь добавить поле в нижнюю часть div-заполнителя, он расширяет нижнюю часть страницы, но нижний колонтитул остается в том же положении, что и над последней строкой элемента div-заполнителя, а не внизу страницы.
Что я пытаюсь сделать нужно разместить нижний колонтитул внизу с использованием абсолютного, а не фиксированного, и оставить немного места над нижним колонтитулом.

Подробнее здесь: https://stackoverflow.com/questions/783 ... ge-in-vue3