Vue导航Footer组件如何实现动态高度自适应？

Good“智慧提问于 2026-02-04 10:44:30 阅读 87

组件

我在开发导航页脚组件时遇到问题，Footer总被内容遮挡。当页面内容较少时页脚能贴在底部，但内容多时反而被覆盖。我尝试用position: fixed定位，但会导致滚动时内容穿透，换用绝对定位又需要手动计算父容器高度，感觉很麻烦。


<template>
  <div class="container">
    <main>{{ content }}</main>
    <footer class="footer">© 2024 MySite</footer>
  </div>
</template>

<style>
.container { position: relative; }
.footer {
  position: absolute;
  width: 100%;
  bottom: 0;
}
</style>

这样写在内容超过一屏时页脚会覆盖底部内容，有没有更优雅的布局方案？或者Tailwind的类名组合可以解决这个问题？

Footer页脚导航组件

我来解答赞 8 收藏

反馈

1 条解答

景岩 Lv1

用 flex 布局最简单，直接这样：

<template>

  <div class="container">

    <main>{{ content }}</main>

    <footer class="footer">© 2024 MySite</footer>

  </div>

</template>

.container {

  display: flex;

  flex-direction: column;

  min-height: 100vh;

}



main {

  flex: 1;

}

2026-02-04 11:11