当前位置：首页 > VUE

vue实现上下布局

2026-01-08 07:31:53VUE

实现上下布局的基本结构

在Vue中实现上下布局，可以通过CSS Flexbox或Grid布局快速完成。以下是一个基础模板示例：

<template>
  <div class="layout-container">
    <header class="header">顶部区域</header>
    <main class="main-content">主要内容区域</main>
  </div>
</template>

<style scoped>
.layout-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.header {
  height: 60px;
  background: #333;
  color: white;
}
.main-content {
  flex: 1;
  background: #f5f5f5;
}
</style>

固定顶部与滚动内容

若需要顶部固定、内容区域可滚动，可添加以下样式调整：

vue实现上下布局

.layout-container {
  overflow: hidden;
}
.main-content {
  overflow-y: auto;
}

使用CSS Grid布局

另一种实现方式是使用CSS Grid：

<template>
  <div class="grid-layout">
    <div class="top-section">顶部</div>
    <div class="content-section">内容</div>
  </div>
</template>

<style scoped>
.grid-layout {
  display: grid;
  grid-template-rows: 80px 1fr;
  height: 100vh;
}
.top-section {
  background: #42b983;
}
.content-section {
  background: #f9f9f9;
}
</style>

响应式调整

添加媒体查询适应不同屏幕尺寸：

vue实现上下布局

@media (max-width: 768px) {
  .header {
    height: 50px;
  }
}

带底部栏的布局

扩展为三部分布局（顶-中-底）：

<template>
  <div class="triple-layout">
    <header>头部</header>
    <main>内容</main>
    <footer>底部</footer>
  </div>
</template>

<style scoped>
.triple-layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
footer {
  height: 40px;
  background: #ddd;
}
</style>

动态高度控制

通过Vue数据绑定动态调整布局高度：

<template>
  <div class="dynamic-layout" :style="{ '--header-height': headerHeight + 'px' }">
    <div class="dynamic-header">可调整头部</div>
    <div class="dynamic-main">内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headerHeight: 80
    }
  }
}
</script>

<style scoped>
.dynamic-layout {
  --header-height: 80px;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.dynamic-header {
  height: var(--header-height);
}
.dynamic-main {
  height: calc(100vh - var(--header-height));
}
</style>