Tailwind CSS: Creating a single page app with scrolling box-CodePudding

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/[email protected]/dist/tailwind.min.css">
</head>

<body >
    <div >
        <div >
            <div >
                <!-- This is where I added in the h-40 -->
                <div >
                <!-- <div > -->
                    This is a NavBar
                </div>
                <div >
                    <div >
                        I'm a side bar
                    </div>

                    <div >
                        <div >
                            <div >
                                <div >
                                    <div >
                                        Chat messages
                                        <div > <div > <div > A </div> <div > <div> Message 1</div> </div> </div> </div>
                                        <div > <div > <div > A </div> <div > <div> Message 2</div> </div> </div> </div>
                                        <div > <div > <div > A </div> <div > <div> Message 3</div> </div> </div> </div>
                                        <div > <div > <div > A </div> <div > <div> Message 4</div> </div> </div> </div>
                                        <div > <div > <div > A </div> <div > <div> Message 5</div> </div> </div> </div>
                                        <div > <div > <div > A </div> <div > <div> Message 6</div> </div> </div> </div>
                                        <div > <div > <div > A </div> <div > <div> Message 7</div> </div> </div> </div>
                                        <div > <div > <div > A </div> <div > <div> Message 8</div> </div> </div> </div>
                                        <div > <div > <div > A </div> <div > <div> Message 9</div> </div> </div> </div>
                                        <div > <div > <div > A </div> <div > <div> Message 10</div> </div> </div> </div>
                                        <div > <div > <div > A </div> <div > <div> Message 11</div> </div> </div> </div>
                                        <div > <div > <div > A </div> <div > <div> Message 12</div> </div> </div> </div>
                                        <div > <div > <div > A </div> <div > <div> Message 13</div> </div> </div> </div>
                                        <div > <div > <div > A </div> <div > <div> Message 14</div> </div> </div> </div>
                                        <div > <div > <div > A </div> <div > <div> Message 15</div> </div> </div> </div>
                                        <div > <div > <div > A </div> <div > <div> Message 16</div> </div> </div> </div>
                                        <div > <div > <div > A </div> <div > <div> Message 17</div> </div> </div> </div>
                                        <div > <div > <div > A </div> <div > <div> Message 18</div> </div> </div> </div>
                                        <div > <div > <div > A </div> <div > <div> Message 19</div> </div> </div> </div>
                                        <div > <div > <div > A </div> <div > <div> Message 20</div> </div> </div> </div>
                                        <div > <div > <div > A </div> <div > <div> Message 21</div> </div> </div> </div>

                                    </div>
                                </div>
                            </div>
                            <div >
                                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?

CodePudding user response：

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