I'm working on a pretty large website with many pages. There is an image used on several pages that works with no issues, however on very short pages, it is causing white space to appear at the bottom of the page below the footer.
The problem seems to be that there is a image in the header that is meant to be displayed down the page, but it is popping out below the footer here.
I tried adjusing the size of the body to be larger, but then there is too much white space between the top of the page and the footer. I could remove the image to solve the problem, but the client really wants it to stay.
Here is the code
<body>
<div></div>
<div>
<header></header>
<header class="alignfull relative pt-[132px] xl:pt-[170px] pb-[27px] xl:pb-[35px] overflow-x-clip">
<div class="main-col text-xs mb-[50px] xl:mb-[47px] print:hidden"></div>
<div class="main-col">
<h1>TITLE</h1>
</div>
<img src="/orange.svg" class="absolute max-w-none z-[-1] transform -rotate-90 xl:w-[2500px] xl:top-[280px] origin-top xl:-right-[833px] w-[1000px] top-[167px] -right-[325px]" data-pg-ia-scene='{"dir":"v","s":"custom","s_t":"start","s_s":"start","e_t":"end","l":[{"a":{"l":[{"t":"","l":[{"t":"set","p":0,"d":0,"l":{"xPercent":10},"e":"Power1.easeOut"},{"t":"tween","p":0,"d":1,"l":{"xPercent":-10},"e":"Power1.easeOut"}]}]}}],"e_s":"center"}'/>
</header>
</div>
<div>Content</div>
<footer>Footer</footer>
</body>
and CSS
.alignfull {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.main-col {
width: 100%;
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
max-width: 980px;
}