我想用 Tailwind 创建一个带有导航栏和侧边栏的网站。我想要 3 个 div（侧面、导航、主）。主区域和侧区域不应移动，用户应该只能在主区域中滚动。主要需要占用所有可用空间。我怎样才能实现这个目标？
您可以在此处查看工作示例https://stackblitz.com/edit/tailwindcss-7yp3vcpt?file=index.html.
完整的工作代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>Welcome to Tailwind!</title>
</head>
<body class="h-screen overflow-hidden">
<!-- Navbar -->
<div class="w-full h-16 bg-blue-600 text-white flex items-center px-4 fixed top-0 z-10">
<h1 class="text-lg font-bold">Navbar</h1>
</div>
<div class="flex h-full pt-16">
<!-- Sidebar -->
<div class="w-64 bg-gray-800 text-white h-full fixed top-16 left-0 z-10">
<ul class="p-4 space-y-2">
<li class="hover:bg-gray-700 p-2 rounded">Menu Item 1</li>
<li class="hover:bg-gray-700 p-2 rounded">Menu Item 2</li>
<li class="hover:bg-gray-700 p-2 rounded">Menu Item 3</li>
</ul>
</div>
<!-- Main Content -->
<div class="ml-64 flex-1 h-full overflow-y-auto bg-gray-100 p-4">
<div class="max-w-4xl mx-auto">
<h2 class="text-2xl font-bold mb-4">Main Content</h2>
<p class="mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
</p>
<!-- Add more content to enable scrolling -->
<div class="space-y-4">
<p>Content Block 1</p>
<p>Content Block 2</p>
<p>Content Block 3</p>
<p>Content Block 4</p>
<p>Content Block 5</p>
<p>Content Block 6</p>
<p>Content Block 7</p>
<p>Content Block 8</p>
<p>Content Block 9</p>
<p>Content Block 10</p>
<p>Content Block 11</p>
<p>Content Block 12</p>
<p>Content Block 13</p>
<p>Content Block 14</p>
<p>Content Block 15</p>
</div>
</div>
</div>
</div>
</body>
</html>