My webpage features a dynamic div that transforms into another div upon clicking a button. Although both divs share similar properties, clicking the button causes some elements to shift unexpectedly. Strangely enough, when the height of the replacing div is smaller than the page's height, other divs remain unaffected; however, when the height exceeds the page's dimensions, it disrupts the layout of other elements.
No changes occur when the middle section fits neatly on the page: I have illustrated this scenario here:
When the middle section overflows and extends beyond the page, certain elements are compelled to move leftward: See the impact in this image:
Please view this demonstration in full-screen mode to better understand the issue: