当前位置：首页 > VUE

vue实现上下布局

2026-03-28 09:16:27VUE

上下布局实现方法

使用Flexbox布局

在Vue中可以通过Flexbox快速实现上下布局结构。创建一个父容器并设置display: flex和flex-direction: column。

<template>
  <div class="container">
    <header>顶部内容</header>
    <main>主体内容</main>
    <footer>底部内容</footer>
  </div>
</template>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header {
  background: #42b983;
  padding: 20px;
}
main {
  flex: 1;
  padding: 20px;
}
footer {
  background: #35495e;
  padding: 20px;
}
</style>

使用Grid布局

CSS Grid布局也能实现类似效果，通过grid-template-rows定义行高分配。

vue实现上下布局

<template>
  <div class="grid-container">
    <div class="header">顶部区域</div>
    <div class="content">主内容区</div>
    <div class="footer">底部区域</div>
  </div>
</template>

<style>
.grid-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}
.header {
  background: #f0f0f0;
  padding: 15px;
}
.content {
  padding: 20px;
}
.footer {
  background: #e0e0e0;
  padding: 15px;
}
</style>

固定顶部/底部布局

需要固定顶部或底部时，可以结合定位实现。以下示例固定顶部导航栏：

vue实现上下布局

<template>
  <div class="fixed-layout">
    <nav class="fixed-header">导航栏</nav>
    <div class="scroll-content">
      <!-- 可滚动内容 -->
    </div>
  </div>
</template>

<style>
.fixed-layout {
  position: relative;
  height: 100vh;
}
.fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  background: #333;
  color: white;
}
.scroll-content {
  padding-top: 60px;
  height: 100%;
  overflow-y: auto;
}
</style>

响应式调整

通过媒体查询可以针对不同屏幕尺寸调整布局：

@media (max-width: 768px) {
  .container {
    flex-direction: column-reverse;
  }
  .grid-container {
    grid-template-rows: 1fr auto auto;
  }
}

动态高度控制

在Vue组件中动态计算内容高度：

<script>
export default {
  data() {
    return {
      headerHeight: 80
    }
  },
  computed: {
    contentHeight() {
      return `calc(100vh - ${this.headerHeight}px)`
    }
  }
}
</script>

<template>
  <div>
    <div :style="{height: `${headerHeight}px`}">头部</div>
    <div :style="{height: contentHeight}">内容</div>
  </div>
</template>