diff --git a/src/frontend/index.html b/src/frontend/index.html
index 096d706c..748fe2f7 100644
--- a/src/frontend/index.html
+++ b/src/frontend/index.html
@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>frontend</title>
   </head>
-  <body>
-    <div id="app"></div>
+  <body style="margin:0; padding:0; overflow:hidden;">
+    <div id="app" style="width: 100vw; height: 100vh; overflow: hidden;"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/src/frontend/src/App.vue b/src/frontend/src/App.vue
index a97b5699..df08f2e5 100644
--- a/src/frontend/src/App.vue
+++ b/src/frontend/src/App.vue
@@ -21,11 +21,11 @@ const handleTemplateSelect = (e: Event) => {
     <router-view />
   </div>
 
-  <div v-else class="douzone-app-container">
-    <QuantHeader />
+  <div v-else class="douzone-app-container flex flex-col h-screen w-screen overflow-hidden">
+    <QuantHeader class="shrink-0" />
     
     <!-- 12대 QuantEngine WBS 메뉴 네비게이션 바 & 11대 표준 업무 템플릿 셀렉터 -->
-    <div style="background: #1E293B; padding: 6px 16px; display: flex; items-center; justify-content: space-between; border-bottom: 1px solid #0F172A; overflow-x: auto; white-space: nowrap;">
+    <div class="shrink-0" style="background: #1E293B; padding: 6px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #0F172A; overflow-x: auto; white-space: nowrap;">
       <div style="display: flex; gap: 6px; align-items: center;">
         <router-link to="/dashboard" style="color: white; text-decoration: none; padding: 4px 8px; font-size: 12px; font-weight: bold;" active-class="bg-blue-600 rounded">SCR-11: 펀드 KPI</router-link>
         <router-link to="/timeseries" style="color: white; text-decoration: none; padding: 4px 8px; font-size: 12px; font-weight: bold;" active-class="bg-blue-600 rounded">SCR-01: 시계열</router-link>
@@ -59,12 +59,12 @@ const handleTemplateSelect = (e: Event) => {
       </div>
     </div>
 
-
-    <main style="flex: 1; overflow-y: auto; background: #F4F6F9;">
+    <!-- main scrollable body -->
+    <main class="flex-1 min-h-0 overflow-y-auto bg-slate-100">
       <router-view />
     </main>
 
-
-    <QuantFooter />
+    <!-- Always Fixed at Viewport Bottom -->
+    <QuantFooter class="shrink-0 mt-auto" />
   </div>
 </template>
diff --git a/src/frontend/src/assets/douzone.css b/src/frontend/src/assets/douzone.css
index 1f732905..82adec41 100644
--- a/src/frontend/src/assets/douzone.css
+++ b/src/frontend/src/assets/douzone.css
@@ -84,8 +84,12 @@ body {
 
 .w-full { width: 100%; }
 .h-full { height: 100%; }
+.w-screen { width: 100vw; }
+.h-screen { height: 100vh; }
 .min-h-full { min-height: 100%; }
 .min-h-0 { min-height: 0; }
+.shrink-0 { flex-shrink: 0; }
+.mt-auto { margin-top: auto; }
 .overflow-hidden { overflow: hidden; }
 .overflow-y-auto { overflow-y: auto; }
 .overflow-x-auto { overflow-x: auto; }
