I need help with the height of a drawer content

[cesarIsysDev]

I'm having trouble creating a relatively simple layout. I'd like the content area to have a fixed size, with the navbar always at the top and the scroll only visible in the red area containing the content, so the client can only scroll within the content and the navbar remains visible. I've created a tailwind play with the summarized content; I'm not sure if it's a problem with the drawer component or if I'm doing something wrong (I would appreciate any help).

https://play.tailwindcss.com/6t5bT5p5AO

[saadeghi]

Instead of adding a new scrollable area, make the navbar sticky:
https://play.tailwindcss.com/z4Zv7uC9jx

Let me know if you have a question.

[cesarIsysDev]

I’d like to thank you immensely once again for your help. Even though I’ve been using ChatGPT and other AIs to assist me, I hadn’t thought of the obvious idea of simply fixing the navbar. If possible, could you please also teach me the best way to create a layout like this without generating a new scrollable area, keeping a footer always visible at the bottom of the page?

In my app, I’ll have lists with pagination right where the footer is, and in the forms I’d like the save button to always remain visible as well.

Do you think this layout is a bad approach? Is it better not to use this kind of fixed footer in order to build a responsive app that works well on both large and small screens?

Sorry if I shifted the topic from DaisyUI to more of a CSS lesson — but I wanted to take the opportunity to clarify this issue, which is a constant pain in my day-to-day work. I even made a TailwindPlay including the footer:

https://play.tailwindcss.com/mkw9GzBUfa

[pdanpdan]

The easiest way would be to use a flex col with full height (watch on mobiles, maybe use 100dvh instead of h-screen).

In the flex container add what you want on top and bottom, and make sure the element in the middle is flex-grow and scrollable

https://play.tailwindcss.com/bJ6M29Vawu

[cesarIsysDev]

Thank you so much, that's exactly what I needed. You probably can't imagine how much time I've already wasted on this.