From 296ae594f8c2557b0115690e29a83d91ec15b08d Mon Sep 17 00:00:00 2001 From: sb Date: Mon, 6 Jul 2026 01:18:48 +0900 Subject: [PATCH] =?UTF-8?q?fix(layout):=20=EC=95=B1=20=EC=85=B8=20?= =?UTF-8?q?=EA=B3=A0=EC=A0=95=20=EB=86=92=EC=9D=B4=20=E2=80=94=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=A0=84=EC=B2=B4=20=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A1=A4=20=EC=A0=9C=EA=B1=B0=20+=20=EC=83=81=C2=B7=ED=95=98?= =?UTF-8?q?=EB=8B=A8=20=EA=B3=A0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit .layout 을 100dvh 고정 + overflow hidden, .layout-body 에 min-height:0 로 본문만 세로 스크롤(가로 숨김). 기기별 뷰포트·안전영역 차로 생기던 불필요한 상하좌우 스크롤과 하단 내비 밀림 해결. Co-Authored-By: Claude Opus 4.8 --- src/App.vue | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/App.vue b/src/App.vue index e79d3a6..0f5fe64 100644 --- a/src/App.vue +++ b/src/App.vue @@ -230,7 +230,10 @@ watch(() => route.fullPath, () => ui.closeSidebar()) 'bottom bottom'; grid-template-columns: 220px 1fr; grid-template-rows: auto 1fr auto; - min-height: 100vh; + /* 앱 셸: 뷰포트 높이에 고정하고 본문(layout-body)만 스크롤 → 상단 헤더·하단 내비 고정, 페이지 전체 스크롤 방지 */ + height: 100vh; /* 폴백 */ + height: 100dvh; /* 동적 뷰포트(주소창·안전영역 반영) */ + overflow: hidden; } .layout-top { @@ -394,9 +397,11 @@ watch(() => route.fullPath, () => ui.closeSidebar()) .layout-body { grid-area: body; padding: 1.5rem 2rem; - /* 하단 고정 내비(56px)+소프트키 인셋만큼 비워 콘텐츠가 가리지 않게 */ - padding-bottom: calc(56px + env(safe-area-inset-bottom, 0) + 1rem); - overflow: auto; + /* 그리드 1fr 트랙 안에서만 스크롤(콘텐츠로 인해 트랙이 늘어나 페이지 전체가 스크롤되지 않도록 min-height:0) */ + min-height: 0; + overflow-y: auto; + overflow-x: hidden; /* 페이지 가로 스크롤 방지 — 넓은 표/차트는 각자 컨테이너에서 스크롤 */ + -webkit-overflow-scrolling: touch; } .layout-bottom { @@ -466,7 +471,6 @@ watch(() => route.fullPath, () => ui.closeSidebar()) } .layout-body { padding: 1rem; - padding-bottom: calc(56px + env(safe-area-inset-bottom, 0) + 1rem); } }