如何将页眉和页脚固定在顶部和底部？

huangapple
go评论193阅读模式
英文:

How to set header & footer fixed at top and bottom?

问题

我的页脚无法固定在底部，我尝试了两种方法。每种方法都存在问题。如何修复它们而不影响我的内容组件？

使用自定义的"footer-bottom"（固定在底部，但重叠）：
pc
响应式

使用fixed-bottom（不重叠，但无法固定在底部）：
pc
响应式

App.vue：

  1. <script setup>
  2. import Header from "./components/Header.vue";
  3. import Footer from "./components/Footer.vue";
  5. // 内容
  6. import ShowsSection from "./components/ShowsSection.vue";
  7. </script>
  9. <template>
  10.   <Header class="header-top" />
  12.   <!-- 内容 -->
  13.   <ShowsSection />
  15.   <!-- 使用: fixed-bottom ?  -->
  16.   <Footer class="footer-bottom" />
  17. </template>
  19. <style scoped>
  20. .header-top {
  21.   top: 0;
  22.   /* position: fixed; */
  23.   width: 100%;
  24. }
  25. .footer-bottom {
  26.   bottom: 0;
  27.   position: fixed;
  28.   width: 100%;
  29. }
  30. </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:

  1. &lt;script setup&gt;
  2. import Header from &quot;./components/Header.vue&quot;;
  3. import Footer from &quot;./components/Footer.vue&quot;;
  5. // Content
  6. import ShowsSection from &quot;./components/ShowsSection.vue&quot;;
  7. &lt;/script&gt;
  10. &lt;template&gt;
  11.   &lt;Header class=&quot;header-top&quot; /&gt;
  13.   &lt;!-- Content --&gt;
  14.   &lt;ShowsSection /&gt;
  16.   &lt;!-- Use: fixed-bottom ?  --&gt;
  17.   &lt;Footer class=&quot;footer-bottom&quot; /&gt;
  18. &lt;/template&gt;
  21. &lt;style scoped&gt;
  22. .header-top {
  23.   top: 0;
  24.   /* position: fixed; */
  25.   width: 100%;
  26. }
  27. .footer-bottom {
  28.   bottom: 0;
  29.   position: fixed;
  30.   width: 100%;
  31. }
  32. &lt;/style&gt;

答案1

得分: 1

用户可以滚动页面吗？如果不能，也许您可以为其使用固定高度。所以，类似于：

  1. &lt;script setup&gt;
  2. import Header from &quot;./components/Header.vue&quot;;
  3. import Footer from &quot;./components/Footer.vue&quot;;
  5. // 内容
  6. import ShowsSection from &quot;./components/ShowsSection.vue&quot;;
  7. &lt;/script&gt;
  9. &lt;template&gt;
  10.   &lt;div class=&quot;wrapper&quot;&gt;
  11.     &lt;Header class=&quot;header-top&quot; /&gt;
  13.     &lt;!-- 内容 --&gt;
  14.     &lt;ShowsSection /&gt;
  16.     &lt;!-- 是否使用 fixed-bottom ?  --&gt;
  17.     &lt;Footer class=&quot;footer-bottom&quot; /&gt;
  18.   &lt;/div&gt;
  19. &lt;/template&gt;
  21. &lt;style scoped&gt;
  22. .header-top {
  23.   top: 0;
  24.   /* position: fixed; */
  25.   width: 100%;
  26. }
  27. .footer-bottom {
  28.   bottom: 0;
  29.   position: fixed;
  30.   width: 100%;
  31. }
  32. .wrapper {
  33.   min-height: 100vh;
  34. }
  35. &lt;/style&gt;

现在，如果内容仍然与 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:

  1. &lt;script setup&gt;
  2. import Header from &quot;./components/Header.vue&quot;;
  3. import Footer from &quot;./components/Footer.vue&quot;;
  5. // Content
  6. import ShowsSection from &quot;./components/ShowsSection.vue&quot;;
  7. &lt;/script&gt;
  9. &lt;template&gt;
  10.   &lt;div class=&quot;wrapper&quot;&gt;
  11.     &lt;Header class=&quot;header-top&quot; /&gt;
  13.     &lt;!-- Content --&gt;
  14.     &lt;ShowsSection /&gt;
  16.     &lt;!-- Use: fixed-bottom ?  --&gt;
  17.     &lt;Footer class=&quot;footer-bottom&quot; /&gt;
  18.   &lt;/div&gt;
  19. &lt;/template&gt;
  21. &lt;style scoped&gt;
  22. .header-top {
  23.   top: 0;
  24.   /* position: fixed; */
  25.   width: 100%;
  26. }
  27. .footer-bottom {
  28.   bottom: 0;
  29.   position: fixed;
  30.   width: 100%;
  31. }
  32. .wrapper {
  33.   min-height: 100vh;
  34. }
  35. &lt;/style&gt;

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.

huangapple
  • 本文由 发表于 2023年8月10日 16:20:33
  • 转载请务必保留本文链接：https://go.coder-hub.com/76873863.html
  • vue.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定