How to have background colour set for infinite length of page?

That’s not what I mean though.

I made a pen so I could play with the idea:

1 Like

I’m not sure what problem you are referring to exactly but you should know that absolute elements will not be affected by overflow on a parent unless that parent has position: relative applied.

An absolute element’s containing block will be the nearest positioned ancestor but if none exists then the root element becomes the containing block. That containing block will control the overflow of its children including any absolute elements within. The absolute element will just spill out of any non positioned parents because they are essentially not contained by them.


I think I got it now. :slight_smile:

Just to be clear, it is the html root element (or the viewport if you like) that will contain the AP if it has no positioned ancestor.

So they are not contained by the static box div, then as the overflow on the html is visible it might generate a scroll on the html.

If I understand the issue this time. :wink:

I see @PaulOB Paul had already explained it. :slight_smile:


Perfect, PaulOB; thanks!

The reason I had added overflow-y:scroll in my code was to give me a permanent scrollbar and it seems to do exactly that.

Yes, sorry, I had read your comment about adding 1px and meant to address it later as I thought it was unrelated to the original issue. Silly me! Yes, that, along with your box-sizing:border-box; did the trick!

Thanks for your explanation of how things work, zack1. I am still very new to this and am still trying to wrap MY head around even the most basic things! When you say on the #container, do you mean on categories [type=“checkbox”] ? I tried your suggestion but it made the hidden checkboxes appear. Don’t ask me to explain this as user Paul_Wilkins did the code, hahah.

Thanks also for your input, Erik_J.

I’m going to have to read your post #22 again VERY slowly! Hahah. It does sound as if it contains very useful information.

Thanks again, Erik_J.

Everything seems to work the way I wanted, so thanks to all of you very helpful people!

I’ll probably be back though! Hahah.


What I mean is two things:
1- if you leave left:-1000px; (instead of changing to top)
2- on ‘categories’, add position:relative;.

It just changes who the parent is of the absolute positioned input boxes.


Thanks zack1. Yes, your way works also. At my end, I still need to add 100vh and border-box to ensure no little scroll AND full vertical background.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.