Im using Tabs component.
I need Tab content to be 100% height of parent container and its content should be with scroll (so my tabs selection will not scroll but content will be scrolling inside of each tab).
when I set it 100% height it doesn’t work.
Here is my screenshot:
using not a flex but block for content doesn’t work either
Have you tried setting the ‘Tabs’ element to 100% height as well?
yes and but I cannot make content 100% height even tabs and outside container are…
I’m not sure this is the best method, but I wasted a lot of time previously trying to just get an element to take up the remaining available vertical space.
At the moment I bind the height of the contents to a formula and set overflow to Auto
Example:
"calc(100vh - (115px + 20px))"
For me I use this as 100vh minus (height of content above + footer height) so if i add content above or below I can change it easily.
For your context you could - add the height of; page header + tab header + padding, and subtract from 100vh
wow this works for making 100% of content inside of Tabs container!! HUGE THANKS!!
Weweb should address this… the solution with calcs is not a real solution. Set 100% height should work of 100% of the space avaiable… just Look like webflow works… I spend a alot of time doing on weweb what i can do in webflow in seconds… I still love weweb much more, but this little thing could be better.
i think u can just use 100vh in min height, if u want it like a little space from for example the header u can use top margin to get that space
the thing is, if u have like one body section with a container inside it, and u want ur container to be over the full screen u set it to min height 100vh, if u have like 2 containers but dont want the first container to be too big on height, u can set one to 70vh and another to 30vh, the idea is to have at least 100vh total to place all over the screen