check image
#can anyone help with css
frail holly
Use math `calc(100vh-8px)`
not working
I'm 99% certain that calc(100vh-8px) does what you want. If its not working, the problem lies elsewhere.
frail holly
`calc(100vh - 8px)`
It'll work with or without the extra whitespace.
tawny void
firefox says it's invalid without spaces and it won't work
frail holly
It'll work with or without the extra whitespace.
Oh nvm, yeah, you need space.
That's where the 1% uncertainty went
frail holly
I'm 99% certain that `calc(100vh-8px)` does what you want. If its not working, t...
it was not working in tailwind i did manually in global css with pure css then its working
thanks
tawny void
I wouldn't use that approach though, because on mobile browsers the browser interface might screw this up. Mobile browsers and vh are a pain.
frail holly
I wouldn't use that approach though, because on mobile browsers the browser inte...
For mobile, you can just completely remove the height.
Since it'll overflow in most cases where you need vh.
Just have it fit the contents
tawny void
I'd just use flex to dynamically make the page full height. No need for height.
frail holly
For mobile, it'll be inevitable to have scrolling so making anything full height doesn't really make sense.
Making the main wrapper a flexbox would introduce alot of scrolling challenges.
If you set an element to fill the gap, it can't expand past its container.
If you really want something to occupy most of the screen for mobile (e.g. force the footer on bottom, then use min-height: 100vh
So it can still expand if needed
tawny void
it really depends on what you want to do
i'm assuming the sidebar and the main content should each have their own scrollbar
as scrolling the entire thing with a sidebar doesn't make much sense
frail holly
as scrolling the entire thing with a sidebar doesn't make much sense
A sidebar on mobile?
tawny void
again, depends
frail holly
Then I'd agree, but having a sidebar on mobile is just.. bad design?
tawny void
if it can be minimized, sure