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

[zack1]

@Erik_J

The collapsing margin Paul mentioned is on the paragraph in the search form, outside the categories div, so it’s not affected by the overflow setting.

That’s not what I mean though.

I made a pen so I could play with the idea: https://codepen.io/zackw/pen/eRRopY?editors=1100

[PaulOB]

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.

[Erik_J]

@zack1

That’s not what I mean though.

I think I got it now.

@zack1

Incidentally, you could have also fixed it by setting position:relative; on the #container. This is because if you do position absolute, it has to base itself on a parent with a non static position. In your case it could only position based on the body.

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.

Edit)
I see @PaulOB Paul had already explained it.

[TechnoKid]

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.

[zack1]

@TechnoKid

When you say on the #container, do you mean on categories [type=“checkbox”] ? I tried your suggestion but it made the hidden checkboxes appear.

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.

[TechnoKid]

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.