aside height calculation error

[stevenkissack]

I've just starting using the react version (also trying to change more of it to reactstrap components)

Anyway, I've ran into a strange bug that I don't believe is technically your fault as the calculation seems correct but it is consistent across all browsers which is strange.. the aside tab content when bigger than the container cuts off the bottom of the content

Offending element: .aside-menu-fixed .aside-menu .tab-content

The see the issue: https://genesisui.com/demo/root/bootstrap4-ajax/#main.html Go to the message tab in the aside and you'll see the bottom message being cut off.

Calculation related rambling: You use a similar method to size the left nav (VH 100% minus the the topbar nav height) and this works perfectly, so my guess is the extra tabs heading div height calculation is the culprit (padding plus icon font size) This actually looks to be correct but once you use it in practice all browsers seem to overshoot it by 1 VH unit.

Temp fix: I have a tight deadline so I've simply overridden it and reduced the VH by 1 - All browsers work flawlessly now but this isn't something I'd want to push upstream.

You seem to have much more experience with this so any help would be amazing!

Thanks a bunch for your work, it's a really nice and flexible codebase to work with!