From 967ae1c483350972105b171dc9b6d38dfa1b69f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E4=BC=A0=E9=BE=99?= <zclzone@outlook.com>
Date: Mon, 18 Apr 2022 22:01:30 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4layout=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/index.vue | 35 ++++++++++++++++-------------------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/layout/index.vue b/src/layout/index.vue
index f8e024f..bad04b7 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,26 +1,23 @@
 <template>
-  <div class="layout">
-    <n-layout has-sider position="absolute">
-      <n-layout-sider bordered :width="200" :collapsed-width="0" :native-scrollbar="false">
-        <SideBar />
-      </n-layout-sider>
-      <n-layout>
-        <n-layout-header :style="{ height: useTheme.header.height + 'px' }" style="border-left: none">
-          <AppHeader />
-        </n-layout-header>
+  <n-layout has-sider style="height: 100%">
+    <n-layout-sider bordered :width="200" :collapsed-width="0" :native-scrollbar="false">
+      <SideBar />
+    </n-layout-sider>
+    <n-layout>
+      <n-layout-header :style="{ height: useTheme.header.height + 'px' }">
+        <AppHeader />
+      </n-layout-header>
 
-        <n-layout
-          position="absolute"
-          style="background-color: #f5f6fb"
-          :style="{ top: useTheme.header.height + 'px' }"
-          :native-scrollbar="false"
-        >
-          <AppTags v-if="useTheme.tags.visible" />
-          <AppMain />
-        </n-layout>
+      <n-layout
+        style="background-color: #f5f6fb"
+        :style="`height: calc(100% - ${useTheme.header.height}px)`"
+        :native-scrollbar="false"
+      >
+        <AppTags v-if="useTheme.tags.visible" />
+        <AppMain />
       </n-layout>
     </n-layout>
-  </div>
+  </n-layout>
 </template>
 
 <script setup>