Currently, I am encountering a problem with using iframes to manage the navigation aspects on my website. Despite setting the iframe to have "overflow: visible;", it still crops the bottom of my content. The strange thing is, both iframes on the same page are cropped at exactly the same height.
I have meticulously checked for any conflicting overflow settings that might be causing this issue, but the only other overflow property I found was "overflow:auto" related to a section that does not interact with the iframes. Additionally, setting a fixed height in pixels for each iframe is not an ideal solution as I want them to dynamically expand as more links are added, ensuring that my goal of avoiding manual edits to every single page remains intact.
Despite my effort to isolate the iframes from any interfering elements by embedding them into minimal structures, the problem persists. I even attempted to implement a suggested script from a similar issue but to no avail.
The codepen containing the entire setup can be viewed here.
For reference, the HTML code for the top left iframe is:
<iframe src="https://thepasteldyke.neocities.org/art/sfw-art/oc/pages-sfw-oc" frameBorder="0" scrolling="no"></iframe>
And for the top right iframe:
<iframe src="https://thepasteldyke.neocities.org/art/sfw-art/oc/worlds-sfw-oc" frameBorder="0" scrolling="no" ></iframe>
Below is the corresponding CSS:
.iframe {
overflow: visible;
}
While I am aware that there must be another style rule overriding the desired behavior, pinpointing the exact cause has proven to be elusive. Interestingly, the issue persists regardless of the number of iframes present on the page.