diff --git a/apps/web/src/Footer.tsx b/apps/web/src/Footer.tsx
index 62f973ac..76bd7f4f 100644
--- a/apps/web/src/Footer.tsx
+++ b/apps/web/src/Footer.tsx
@@ -30,7 +30,7 @@ export default function Footer() {
   const navPath = pathname.split('/')[1];
 
   return (
-    <footer className="bg-background fixed bottom-0 flex h-10 w-full max-w-md justify-between border-t">
+    <footer className="bg-background flex h-10 w-full max-w-md shrink-0 justify-between border-t">
       {navigation.map(item => {
         const isActive = '/' + navPath === item.href;
         const isAnimating = footerAnimateKey === item.key;
diff --git a/apps/web/src/Header.tsx b/apps/web/src/Header.tsx
index 1b388b3d..146dac6b 100644
--- a/apps/web/src/Header.tsx
+++ b/apps/web/src/Header.tsx
@@ -98,7 +98,7 @@ export default function Header() {
   }, []);
 
   return (
-    <header className="bg-background sticky top-0 z-50 flex h-16 w-full max-w-md items-center justify-between border-b p-4">
+    <header className="bg-background sticky top-0 z-50 flex h-16 w-full max-w-md shrink-0 items-center justify-between border-b p-4">
       <div
         className="font-barcode hover:text-accent cursor-pointer text-5xl transition-colors"
         onClick={() => router.push('/')}
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index aeecc111..962576eb 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -102,9 +102,9 @@ export default function RootLayout({
 
   const AppContent = () => (
     <ErrorWrapper>
-      <div className="relative flex h-full w-full max-w-md flex-col">
+      <div className="relative flex h-dvh w-full max-w-md flex-col overflow-hidden">
         <Header />
-        <div className="h-full p-4">{children}</div>
+        <div className="min-h-0 flex-1 overflow-y-auto p-4">{children}</div>
 
         <div className="pointer-events-none fixed bottom-10 left-1/2 z-40 w-full max-w-md -translate-x-1/2 px-1 pb-1">
           <div className="pointer-events-auto">
diff --git a/apps/web/src/app/login/page.tsx b/apps/web/src/app/login/page.tsx
index b1557cb5..731a05a3 100644
--- a/apps/web/src/app/login/page.tsx
+++ b/apps/web/src/app/login/page.tsx
@@ -74,7 +74,7 @@ export default function LoginPage() {
   }, [router, isAuthenticated, isAlert]);
 
   return (
-    <div className="bg-background flex h-dvh flex-col justify-center px-4">
+    <div className="bg-background flex h-full flex-col justify-center px-4">
       <div className="w-full space-y-6">
         <div className="flex flex-col items-center gap-1">
           <h1 className="text-2xl font-bold">로그인</h1>
diff --git a/apps/web/src/app/popular/PopularRankingList.tsx b/apps/web/src/app/popular/PopularRankingList.tsx
index 03b4d0f2..0c3c2ae7 100644
--- a/apps/web/src/app/popular/PopularRankingList.tsx
+++ b/apps/web/src/app/popular/PopularRankingList.tsx
@@ -17,8 +17,8 @@ export default function PopularRankingList() {
   }
 
   return (
-    <Card className="relative">
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+    <Card className="relative flex min-h-0 flex-1 flex-col">
+      <CardHeader className="flex shrink-0 flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle className="text-xl">추천 곡 순위</CardTitle>
 
         <RotateCw
@@ -27,7 +27,7 @@ export default function PopularRankingList() {
         />
       </CardHeader>
 
-      <ScrollArea className="h-[calc(100vh-22rem)]">
+      <ScrollArea className="min-h-0 flex-1">
         <CardContent className="pt-0">
           <div className="space-y-0">
             {data && data.length > 0 ? (
diff --git a/apps/web/src/app/popular/page.tsx b/apps/web/src/app/popular/page.tsx
index 866daea4..1bdffd13 100644
--- a/apps/web/src/app/popular/page.tsx
+++ b/apps/web/src/app/popular/page.tsx
@@ -2,8 +2,8 @@ import PopularRankingList from './PopularRankingList';
 
 export default function PopularPage() {
   return (
-    <div className="flex flex-col gap-4">
-      <h1 className="text-2xl font-bold">인기 노래</h1>
+    <div className="flex h-full flex-col gap-4">
+      <h1 className="shrink-0 text-2xl font-bold">인기 노래</h1>
 
       {/* 추천 곡 순위 */}
 
diff --git a/apps/web/src/app/recent/page.tsx b/apps/web/src/app/recent/page.tsx
index 45192749..0cc00647 100644
--- a/apps/web/src/app/recent/page.tsx
+++ b/apps/web/src/app/recent/page.tsx
@@ -45,8 +45,8 @@ export default function RecentSongPage() {
   const months = Array.from({ length: 12 }, (_, i) => i);
 
   return (
-    <div className="bg-background h-full space-y-4">
-      <div className="flex items-center justify-between px-2">
+    <div className="bg-background flex h-full flex-col space-y-4">
+      <div className="flex shrink-0 items-center justify-between px-2">
         <Button variant="ghost" size="icon" onClick={handlePrevMonth}>
           <ArrowLeft className="h-5 w-5" />
         </Button>
@@ -86,7 +86,7 @@ export default function RecentSongPage() {
       </div>
 
       {recentAddSongs && recentAddSongs.length > 0 ? (
-        <div className="flex h-[calc(100vh-16rem)] flex-col overflow-y-auto">
+        <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
           {recentAddSongs.map(song => (
             <RecentSongCard key={song.id} song={song} />
           ))}
diff --git a/apps/web/src/app/search/HomePage.tsx b/apps/web/src/app/search/HomePage.tsx
index 858dac60..3546ef25 100644
--- a/apps/web/src/app/search/HomePage.tsx
+++ b/apps/web/src/app/search/HomePage.tsx
@@ -141,8 +141,8 @@ export default function SearchPage() {
   }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage, isError]);
 
   return (
-    <div className="bg-background">
-      <div className="flex flex-col gap-4">
+    <div className="bg-background flex h-full flex-col">
+      <div className="flex shrink-0 flex-col gap-4">
         <div className="flex justify-between">
           <div className="flex flex-col">
             <h1 className="text-2xl font-bold">노래 검색</h1>
@@ -226,7 +226,7 @@ export default function SearchPage() {
 
         <LanguageTagFilter value={languageTag} onChange={handleLanguageTagChange} />
       </div>
-      <div ref={setScrollRef} className="h-[calc(100vh-22rem)] overflow-x-hidden overflow-y-auto">
+      <div ref={setScrollRef} className="min-h-0 flex-1 overflow-x-hidden overflow-y-auto">
         {searchSongs.length > 0 && (
           <div className="flex w-full max-w-md flex-col gap-4 p-4">
             {searchSongs.map((song, index) => (
diff --git a/apps/web/src/app/signup/page.tsx b/apps/web/src/app/signup/page.tsx
index e79117f2..2b988447 100644
--- a/apps/web/src/app/signup/page.tsx
+++ b/apps/web/src/app/signup/page.tsx
@@ -78,7 +78,7 @@ export default function SignupPage() {
   };
 
   return (
-    <div className="bg-background flex h-dvh flex-col justify-center px-4">
+    <div className="bg-background flex h-full flex-col justify-center px-4">
       <div className="w-full space-y-6">
         <div className="space-y-2 text-center">
           <h1 className="text-2xl font-bold">회원가입</h1>
diff --git a/apps/web/src/app/tosing/page.tsx b/apps/web/src/app/tosing/page.tsx
index 3125f7ab..b45bb3e6 100644
--- a/apps/web/src/app/tosing/page.tsx
+++ b/apps/web/src/app/tosing/page.tsx
@@ -5,12 +5,12 @@ import SongList from './SongList';
 
 export default function HomePage() {
   return (
-    <div className="bg-background">
-      <div className="mb-6 flex items-center justify-between">
+    <div className="bg-background flex h-full flex-col">
+      <div className="mb-6 flex shrink-0 items-center justify-between">
         <h1 className="text-2xl font-bold">노래방 플레이리스트</h1>
         <AddSongButton />
       </div>
-      <ScrollArea className="h-[calc(100vh-16rem)] py-4">
+      <ScrollArea className="min-h-0 flex-1 py-4">
         <SongList />
       </ScrollArea>
     </div>
diff --git a/apps/web/src/app/withdrawal/page.tsx b/apps/web/src/app/withdrawal/page.tsx
index 6b4f39e9..3c2a7fbc 100644
--- a/apps/web/src/app/withdrawal/page.tsx
+++ b/apps/web/src/app/withdrawal/page.tsx
@@ -56,7 +56,7 @@ export default function WithdrawalPage() {
   };
 
   return (
-    <div className="bg-background flex h-dvh flex-col justify-center px-4">
+    <div className="bg-background flex h-full flex-col justify-center px-4">
       <div className="mx-auto w-full max-w-md space-y-6">
         <div className="space-y-2 text-center">
           <h1 className="text-2xl font-bold">회원 탈퇴</h1>