Tailwind CSS：创建带有滚动框的单页应用答案

【问题标题】：Tailwind CSS: Creating a single page app with scrolling boxTailwind CSS：创建带有滚动框的单页应用
【发布时间】：2022-01-08 02:21:17
【问题描述】：

我正在基于 here 找到的 TailWind CSS 组件创建一个聊天应用程序。基本上，它将页面分为两列：侧边栏和聊天内容部分。聊天内容部分有两行：第一行包含滚动的聊天消息，底部输入行固定在屏幕底部。这种布局有效。聊天消息部分滚动，没有其他内容。太棒了！

现在，我正在尝试对其进行修改，以在始终可见的顶部添加一个导航栏（导航栏）。为此，我创建了一个两行部分，其中导航栏是顶行，页面的其余部分是底行。这也有效。当我希望导航栏大于单行时（通过在导航栏类中添加“h-40”），问题就开始了，然后整个页面开始滚动我添加到导航栏的数量。

这是添加了 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>

我如何拥有一个可变垂直大小的导航栏，并让整个页面停留在屏幕上，只滚动聊天消息？

【问题讨论】：

除了Laitas的回答，你可以看看这个回答：stackoverflow.com/a/69870451/7730727

标签： html css flexbox tailwind-css

【解决方案1】：

我不确定 tailwind 是否支持 calc() 函数，但您可以使用内联样式来实现。只需将height: 'calc(100vh - 10rem)' 添加到您的父母

<div class="flex flex-col flex-auto h-full p-6 bg-gray-700"> 行，它会成功的。顺便说一句，100vh - 10rem 是因为根据顺风文档 h-40 的高度是 10 rem。您将从视口高度移除 10rem 并获得您的价值。

【讨论】：

行得通！我必须使用 v3.0 Play CDN，然后将“h-[calc(100vh-10rem)]”添加到您推荐的 div 中。现在它起作用了！我无法让它与 v2 一起玩。我将不得不继续玩这个。我使用上面 Aras 评论的答案转换为 Tailwind：stackoverflow.com/a/69870451/7730727 谢谢大家！