Tailwind CSS：创建带有滚动框的单页应用
Tailwind CSS: Creating a single page app with scrolling box
我正在创建一个基于找到的 TailWind CSS 组件 here 的聊天应用程序。基本上，它将页面分成两列：侧边栏和聊天内容部分。聊天内容部分有两行：顶部一行是滚动的聊天消息，底部输入行固定在屏幕底部。这种布局有效。聊天消息部分滚动，没有其他内容。太棒了！
现在，我正在尝试修改它以在顶部添加一个始终可见的导航栏 (navbar)。为此，我创建了一个两行部分，其中导航栏位于顶行，页面的其余部分位于底行。这也有效。当我希望导航栏大于单行时（通过向导航栏添加“h-40”class），问题就开始了，然后整个页面开始滚动我添加到导航栏的数量。
这是添加了 h-40 的代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example Layout</title>
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css">
</head>
<body class="bg-gray-200">
<div class="flex h-screen antialiased text-gray-800 bg-blue-700">
<div class="flex flex-row h-full w-full overflow-x-hidden">
<div class="flex flex-col flex-auto flex-shrink-0 h-full w-full bg-gray-700">
<!-- This is where I added in the h-40 -->
<div class="flex flex-row h-40 w-full bg-green-500 flex-shrink-0">
<!-- <div class="flex flex-row w-full bg-green-500 flex-shrink-0"> -->
This is a NavBar
</div>
<div class="flex flex-row h-full w-full bg-green-500">
<div class="flex flex-col py-8 pl-6 pr-2 w-64 bg-white flex-shrink-0">
I'm a side bar
</div>
<div class="flex flex-col flex-auto h-full p-6 bg-gray-700">
<div class="flex flex-col flex-auto flex-shrink-0 rounded-2xl bg-yellow-500 h-full p-4">
<div class="flex flex-col h-full overflow-x-auto mb-4 ">
<div class="flex flex-col h-full bg-red-700">
<div class="grid grid-cols-12 gap-y-2 bg-green-700">
Chat messages
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 1</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 2</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 3</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 4</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 5</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 6</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 7</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 8</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 9</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 10</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 11</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 12</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 13</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 14</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 15</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 16</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 17</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 18</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 19</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 20</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 21</div> </div> </div> </div>
</div>
</div>
</div>
<div class="flex flex-row items-center h-16 rounded-xl bg-blue-700 w-full px-4">
Input box
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
如何让垂直大小可变的导航栏让整个页面停留在屏幕上，只有聊天消息滚动？
我不确定 tailwind 是否支持 calc() 函数，但您可以使用内联样式来实现。
只需将 height: 'calc(100vh - 10rem)' 添加到您的 parent
<div class="flex flex-col flex-auto h-full p-6 bg-gray-700"> 行就可以了。顺便说一句 100vh - 10rem 是因为根据顺风文档 h-40 是高度 10 rem。您将从视口高度移除 10rem 并获取您的值。
我正在创建一个基于找到的 TailWind CSS 组件 here 的聊天应用程序。基本上，它将页面分成两列：侧边栏和聊天内容部分。聊天内容部分有两行：顶部一行是滚动的聊天消息，底部输入行固定在屏幕底部。这种布局有效。聊天消息部分滚动，没有其他内容。太棒了！
现在，我正在尝试修改它以在顶部添加一个始终可见的导航栏 (navbar)。为此，我创建了一个两行部分，其中导航栏位于顶行，页面的其余部分位于底行。这也有效。当我希望导航栏大于单行时（通过向导航栏添加“h-40”class），问题就开始了，然后整个页面开始滚动我添加到导航栏的数量。
这是添加了 h-40 的代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example Layout</title>
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css">
</head>
<body class="bg-gray-200">
<div class="flex h-screen antialiased text-gray-800 bg-blue-700">
<div class="flex flex-row h-full w-full overflow-x-hidden">
<div class="flex flex-col flex-auto flex-shrink-0 h-full w-full bg-gray-700">
<!-- This is where I added in the h-40 -->
<div class="flex flex-row h-40 w-full bg-green-500 flex-shrink-0">
<!-- <div class="flex flex-row w-full bg-green-500 flex-shrink-0"> -->
This is a NavBar
</div>
<div class="flex flex-row h-full w-full bg-green-500">
<div class="flex flex-col py-8 pl-6 pr-2 w-64 bg-white flex-shrink-0">
I'm a side bar
</div>
<div class="flex flex-col flex-auto h-full p-6 bg-gray-700">
<div class="flex flex-col flex-auto flex-shrink-0 rounded-2xl bg-yellow-500 h-full p-4">
<div class="flex flex-col h-full overflow-x-auto mb-4 ">
<div class="flex flex-col h-full bg-red-700">
<div class="grid grid-cols-12 gap-y-2 bg-green-700">
Chat messages
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 1</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 2</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 3</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 4</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 5</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 6</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 7</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 8</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 9</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 10</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 11</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 12</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 13</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 14</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 15</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 16</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 17</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 18</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 19</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 20</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 21</div> </div> </div> </div>
</div>
</div>
</div>
<div class="flex flex-row items-center h-16 rounded-xl bg-blue-700 w-full px-4">
Input box
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
如何让垂直大小可变的导航栏让整个页面停留在屏幕上，只有聊天消息滚动？
我不确定 tailwind 是否支持 calc() 函数，但您可以使用内联样式来实现。
只需将 height: 'calc(100vh - 10rem)' 添加到您的 parent
<div class="flex flex-col flex-auto h-full p-6 bg-gray-700"> 行就可以了。顺便说一句 100vh - 10rem 是因为根据顺风文档 h-40 是高度 10 rem。您将从视口高度移除 10rem 并获取您的值。