英文:
How to set header & footer fixed at top and bottom?
问题
我的页脚无法固定在底部，我尝试了两种方法。每种方法都存在问题。如何修复它们而不影响我的内容组件？
使用自定义的"footer-bottom"（固定在底部，但重叠）：
pc
响应式
使用fixed-bottom（不重叠，但无法固定在底部）：
pc
响应式
App.vue：
<script setup>
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
// 内容
import ShowsSection from "./components/ShowsSection.vue";
</script>
<template>
<Header class="header-top" />
<!-- 内容 -->
<ShowsSection />
<!-- 使用: fixed-bottom ? -->
<Footer class="footer-bottom" />
</template>
<style scoped>
.header-top {
top: 0;
/* position: fixed; */
width: 100%;
}
.footer-bottom {
bottom: 0;
position: fixed;
width: 100%;
}
</style>
英文:
My footer can't fix at the bottom and I tried 2 ways. Each method is issues. How can I fixed them and don't affect my content component?
Using self-define "footer-bottom"(fix at bot, but overlap):
pc
responsive
Using fixed-bottom(not overlap, but doesn't fix at bot):
pc
responsive
App.vue:
<script setup>
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
// Content
import ShowsSection from "./components/ShowsSection.vue";
</script>
<template>
<Header class="header-top" />
<!-- Content -->
<ShowsSection />
<!-- Use: fixed-bottom ? -->
<Footer class="footer-bottom" />
</template>
<style scoped>
.header-top {
top: 0;
/* position: fixed; */
width: 100%;
}
.footer-bottom {
bottom: 0;
position: fixed;
width: 100%;
}
</style>
答案1
得分: 1
用户可以滚动页面吗？如果不能，也许您可以为其使用固定高度。所以，类似于：
<script setup>
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
// 内容
import ShowsSection from "./components/ShowsSection.vue";
</script>
<template>
<div class="wrapper">
<Header class="header-top" />
<!-- 内容 -->
<ShowsSection />
<!-- 是否使用 fixed-bottom ? -->
<Footer class="footer-bottom" />
</div>
</template>
<style scoped>
.header-top {
top: 0;
/* position: fixed; */
width: 100%;
}
.footer-bottom {
bottom: 0;
position: fixed;
width: 100%;
}
.wrapper {
min-height: 100vh;
}
</style>
现在，如果内容仍然与 header 或 footer 重叠，您可以考虑在父元素上使用 flexbox 并在每个子元素上设置 max-height 属性，以确保它们不会重叠。
英文:
can user scroll the page ? I they can't maybe you can use fixed height for that. So, something like:
<script setup>
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
// Content
import ShowsSection from "./components/ShowsSection.vue";
</script>
<template>
<div class="wrapper">
<Header class="header-top" />
<!-- Content -->
<ShowsSection />
<!-- Use: fixed-bottom ? -->
<Footer class="footer-bottom" />
</div>
</template>
<style scoped>
.header-top {
top: 0;
/* position: fixed; */
width: 100%;
}
.footer-bottom {
bottom: 0;
position: fixed;
width: 100%;
}
.wrapper {
min-height: 100vh;
}
</style>
Now if the content still overlap with header or footer, you may want to use flexbox on the parent with max-height properties on each child, just to make sure they won't overlap.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论