Tailwind CSS: Creating a single page app with scrolling box

Question

I am creating a chat app based on the TailWind CSS Component found here. Basically, it splits the page into two columns: a sidebar and a chat content section. The chat content section has two rows: a top row with the chat messages that scrolls and a bottom input row that is pinned to the bottom of the screen. This layout works. The chat messages portion scrolls and nothing else does. Fantastic!

Now, I am trying to modify it to add a navigational bar (navbar) to the top that is always visible. To do this, I created a two row section where the nav bar is the top row and the rest of the page is the bottom row. This is also working. The trouble starts when I want the navbar to be greater than a single line (by adding in "h-40" to the navbar class), then the entire page starts scrolling the amount that I added to the navbar.

Here is the code with the h-40 added in:

<!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>

How to do I have a variable vertically sized navigational bar and have the whole page stay on the screen with just the chat messages scrolling?

In addition to Laitas' answer, you can look this answer: https://stackoverflow.com/a/69870451/7730727 — Aras, Jan 07 '22 at 19:34

score 0 · Accepted Answer · answered Jan 07 '22 at 18:21

0

I'm not sure if tailwind supports calc() function but you can do it with inline styles. Just add height: 'calc(100vh - 10rem)' to your parent

<div class="flex flex-col flex-auto h-full p-6 bg-gray-700"> line and it'll do the trick. Btw 100vh - 10rem is because according to tailwind docs h-40 is height 10 rem. You'd remove 10rem from viewport height and get your value.

answered Jan 07 '22 at 18:21

Laitas

28
1
3

That works! I had to use v3.0 [Play CDN](https://tailwindcss.com/blog/tailwindcss-v3#play-cdn) and then added "h-[calc(100vh-10rem)]" to your recommended div. Now it works! I couldn't get it to play with v2. I'll have to keep playing with that. I converted to Tailwind using the answer from Aras's comment above: [stackoverflow.com/a/69870451/7730727](https://stackoverflow.com/a/69870451/7730727) Thanks everyone! – Bryce Jan 07 '22 at 20:33

Tailwind CSS: Creating a single page app with scrolling box

1 Answers1