Search code examples
javascripthtmlreflow

Fix extra space on HTML page (due to JavaScript collapsing elements)

On my website, I use some custom (probably poorly written) Javascript to make collapsible codeblocks. I've got this one many articles, and most of the time, it works without issue. However, on some specific times, it leaves a huge block of space at the bottom of the page.

For example: https://0xdf.gitlab.io/2024/05/25/htb-bizness.html

Bottom of page with empty extra space

In this image, I'm showing where the HTML element ends, and yet the page has a ton more space.

The JavaScript is here: https://0xdf.gitlab.io/assets/js/collapsable.js

The element causing the issue is the third code block in this section:

codeblock that causes the issue

If I shorten the data in that collapsed codeblock, then the issue goes away. But I've used this same feature on numerous other codeblocks and many other posts without getting any extra space at the end.

Is there something I can do to prevent this? Or fix it after it happens? I've played with adding commands to the JS to try to trigger a reflow. Either I'm not doing it right or it doesn't fix it.

Solution

  • Now you have .code-collapse{ max-height: 500px; }, but this is not enough to hide the child .highlight inside itself.
    Use the overflow property, namely .code-collapse { overflow: hidden; }.