Make height of a scrolling div less than certain height (with calc())
Hey there, am facing this issue where my main div doesn't stay on the certain specified height which should be less than some other element, in this example it should be min-h-[calc(100dvh-2.5rem)], where 2.5rem is height of a navbar located at bottom with fixed position, What I want to achieve is that main div should be scrollable without its bottom content getting overlapped with the navbar
The main thing is that it works untill more elements are added where it becomes scrollable
A playground will make you understand better - https://play.tailwindcss.com/FchqlK9POr
Thanks!
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
7 Replies
you could set margin bottom on that scrollable div to the height of the fixed navbar instead of the min-height on the main
also min-height doesn't work they way you think 🙂
what about doing it with a 2 row grid container, full height of the screen
the first row (1fr) can be used for the main div (overflow: auto)
the second row (auto) just takes the space it needs for the navbar. (no need for calcs)
https://play.tailwindcss.com/tkPcEWad9C
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
grid is love grid is life 😄
Yes, the workaround of margin is right but it looks unnecessary and can break things when there are not enough elements
Yes, thanks but I know we could do it with grid ofc 😅 but I want ti just get this thing working
And can't figure out what's wrong actually
I'll still use grid in this situation but this above problem's solution will be so appreciated
the min-height will already be reached when you get the scrolling, so when it grows, there is nothing to subtract anymore. hens why the maincontainer goes underneath the fixed element. it just takes the size it needs. if you want space underneath that, the margin-bottom (or padding-bottom) for me seems the only way to go.
Ahh now I get it
margin bottom looks the only solution, Thanks!