带有引导程序和Vue 3的完整页面布局

Question

我正在尝试创建一个具有简单布局Header->的单页应用程序；内容->使用Vue3和Bootstrap 5框架的页脚。

我正在尝试让内容填充页眉和页脚之间的空间，并将页脚刷新到页面底部&内容，因此没有重叠。然而，应用程序只是在页面的上半部分呈现所有内容，留下下半部分空白。我尝试了一种灵活的方法，但有些东西似乎不太对劲。

App.vue

<template>
<div id="app">
<div>
<HeaderBar></HeaderBar>
<div class="content"><router-view></router-view></div>
<FooterBar></FooterBar>
</div>
</div>
</template>
<script>
import HeaderBar from "@/components/HeaderBar.vue";
import FooterBar from "@/components/FooterBar.vue";
export default {
components: {
HeaderBar,
FooterBar,
},
};
</script>
<style>
body {
display: flex;
flex-direction: column;
height: 100vh;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.content {
background-image: url("../src/assets/background.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover;
flex-shrink: 0;
}
</style>

标题栏.vue

<template>
<div>
<header class="bg-dark bg-gradient d-flex justify-content-center">
<ul class="nav nav-pill p-2">
<li class="nav-item">
<a class="nav-link fw-bold heading"> Title </a>
</li>
</ul>
</header>
<nav
class="navbar navbar-expand-lg navbar-dark bg-dark"
aria-label="Tenth navbar example"
>
<div class="container-fluid">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarsExample08"
aria-controls="navbarsExample08"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse justify-content-md-center"
id="navbarsExample08"
>
<ul class="navbar-nav justify-content-around">
<li class="nav-item pr-2">
<router-link class="nav-link lead" style="font-size: 2em" to="/"
>HOME</router-link
>
</li>
<li class="nav-item pr-2">
<router-link
class="nav-link lead"
style="font-size: 2em"
to="/about"
>ABOUT</router-link
>
</li>
<li class="nav-item pr-2">
<router-link
class="nav-link lead"
style="font-size: 2em"
to="/gallery"
>GALLERY</router-link
>
</li>
<li class="nav-item pr-2">
<router-link
class="nav-link lead"
style="font-size: 2em"
to="/cms"
>CMS</router-link
>
</li>
</ul>
</div>
</div>
</nav>
</div>
</template>
<style scoped>
@font-face {
font-family: "Mythical Snow";
src: URL("../assets/fonts/MysticalSnow.ttf") format("truetype");
}
.heading {
font-family: "Mythical Snow";
font-size: 4em;
color: #6a7363;
}
nav a {
font-weight: bold !important;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #ffffe0 !important;
}
</style>

页脚栏.vue

<template>
<div id="footer">
<footer class="bg-dark text-center text-white mt-auto">
<!-- Grid container -->
<div class="container p-4 pb-0">
<!-- Section: Social media -->
<section class="mb-4">
<!-- Home -->
<router-link
to="/"
class="btn btn-outline-light btn-floating m-1"
role="button"
><i class="bi bi-house-fill fa-2x"></i
></router-link>
<!-- About -->
<router-link
to="/about"
class="btn btn-outline-light btn-floating m-1"
role="button"
><i class="bi bi-file-person fa-2x"></i
></router-link>
</section>
<!-- Section: Social media -->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">
© 2022 Copyright:
<a class="text-white"></a>
</div>
<!-- Copyright -->
</footer>
</div>
</template>
<style scoped>
.icon {
color: #ffffff;
}
.icon:hover {
color: #000000;
}
footer {
position: sticky;
width: 100%;
}
</style>

Answer 1

<style>
#app {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 98vh;
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.content {
/*  */
}
</style>

<template>
<HeaderBar></HeaderBar>
<div class="content"><router-view></router-view></div>
<FooterBar></FooterBar>
</template>

剥离HeaderBar周围的两个div和App.vue中的FooterBar。

从body中删除所有样式，并将它们放入#app中，添加justify-content: space-between。使用height: 100vh，您将获得一个滚动条。使用98可以避免这种情况。