Compare height to another element height?
Hi.
I'm using Kevin's code to create counter-rounded corners for my sidebar. But when the sidebar's height is greater than the main's height, the trick appears.
Is there a way to compare the height of one element with another?
I'd like to be able to apply some styles to the sidebar when it's larger, and others when it's smaller.
This issue will be fixed when the page contains actual content and the main is larger, but I'd like to fix it when it isn't.
5 Replies
you can set a minimum height to it
I think the min-height doesn't solve the problem here.
The sidebar's height will change as tags are added in the middle. And if I assign a min-height to the main, and there's no content, it would be a big blank space.
I'd like to be able to select the sidebar when it's larger and set the border radius in the normal way, and when it's smaller, set the opposite curves. And the same with the main bar, to get the efect that all is the same object.
then you can use grid to have the same height on both sides
depending on how the html is
maybe you could use a container query for this?
better: can you reproduce this issue in codepen or jsfiddle?