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

Hi.

I have enclosed the entire ‘body’ of a webpage in a div for the purpose of centring, to which I have assigned a max-width, min-width, margin, padding and background only; nothing else. The content of the webpage is a list where multiple selections can be made and upon each selection, a div containing relevant info appears underneath the list.

How can I have the background colour appear permanently all the way down the full page and not only appear behind current content of the page and behind the divs that are selected?

I have tried giving it a length of 100% but this hasn’t worked. Giving it a ridiculously large height does work, but is there a correct way to do this, i.e. have the background colour appear for the full (infinite) length of the page regardless of whether there is any content there?

Any hints would be very much appreciated.

Thanks.

The usual method would be to set the background colour on body, and use a wrapper div for the actual “page” (with the content), setting your min/max widths, etc. on that, rather than on body.

1 Like

Hi TechnoBear; thanks for your quick response!

I already have a different colour for the body background, which works fine (it covers full width and height of page), however, it is the centred part (the wrapper div) that isn’t working.

This is an example of how I have it:

<style>

body {
    background-color:
}

.whatever {
    max-width:
    min-width:
    margin: auto;
    padding:
    background:
}

</style>


<body>

<div class="whatever">

ALL THE CONTENT OF MY PAGE

</div>

</body>
1 Like

I must add another simple method. If you truly want the entire window, add the background property to your html tag.

The body tag is an element within the html page that has dimensions within the window so it can be larger or smaller. If you want to affect the base background use the html tag.

I don’t think it is a good idea to do this simply for circumventing proper structure, but it will work. You can test it on this window in the inspector.

Now if you want to use a specified element as a container for content, and want it ti respond to the content within it, expanding past the dimensions of the browser, you must allow it to recognize that content. You can do this by using overflow: auto; height: auto; on your containers. Be advised if you have a higher up container that does not expand, then your content container may be hidden.

<html>
    <header></header>

<style>
    html {
        background-color: black;
        /* test that it will still work */
        overflow: hidden;
        height: 0px;
    }

    .main {
        overflow: hidden;
        display: block;
        width: ?;
        height: auto;
    }
</style>

<body>
    <main> <!-- Your Content Here --> </main>
</body>
</html>
2 Likes

That should work OK. In my experience, when things don’t behave as expected, it’s usually because I’ve done something daft, like forgotten the semi-colon after the declaration above.

Have you run both the HTML and the CSS through the validators? That’s usually the easiest way to find typos and other silly mistakes.

1 Like

Hi there TechnoKid,

it really would help members here to resolve
your problem, if they could actually see it. :rolleyes:

So supply a link, or all the relevant HTML
and CSS
and I sure that they will be all over
it like a rash.:winky:

What you have provided so far is meaningless. :wonky:

coothead

1 Like

Please copy this to a file and open it in your browser and tell us if this is closer to whatever you want.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>page high bg color</title>
<!--
https://www.sitepoint.com/community/t/how-to-have-background-colour-set-for-infinite-length-of-page/267208
TechnoKid
-->
    <style type="text/css">
body {
    background-color:#bdf;
    padding:0;
    margin:0;
}
.outer {
    max-width:960px;
    min-height:100vh;
    background-color:#fdb;
    margin:0 auto;
}

    </style>
</head>
<body>

<div class="outer">

</div>

</body>
</html>
2 Likes

Hi Emgo, thanks. Unfortunately that hasn’t worked either; it’s the same but now left-aligned instead of centred.

Can’t remember if I ran this version through validators; thanks for the reminder!

OK, coothead, thanks. I usually remove a lot of current info and replace it with example info for posting purposes, so this may take a little while.

ronpat, thanks; that is almost exactly what I am looking for. I’ve made a lazy attempt at just adding your min-height:100vh; to my code, but that only gave me a background for the part of the screen that is viewable; no background if I scrolled down. Anyway, I will try it with my existing code and see if it does the trick.

In the meantime, is there a way to get rid of the blue space at the very bottom of the orange centre (can be seen if lots of lines of text are added)? The margins are already 0.

Thanks.

Hi ronpat; no, it is still only showing a background for the area that is viewable.

I will try to compose an example as per coothead’s advice as soon as possible and will post back. It is possible that this is related to another issue I have been experiencing with the system.

Thanks.

IF the background color does not flow with the page height in your code, but it does in my code (it should be applied to the wrapper div with the content inside of the wrapper), then you are applying it to the wrong container.

Please post a working page with the relevant HTML and CSS that demonstrates the issue (as coothead requested) so we can see what you see and the code that causes it.

2 Likes

Incidentally, if the container div is not growing in vertical size with the content, it’s possible the content is out of flow. If you are using floats or absolute positions, the container won’t really grow with it.

Another issue is that the container div can’t be any taller than its own container. In this case . You do need to set body as 100% height before you can set a child as 100% height.

Another potential with floats, maybe what you can try is add a clear float at the bottom of the container div. Like this:

<div class="container">
... content...
  <div style="clear:both"></div>
</div>

Adding a clear at the bottom of the container will make the container “grow” to the longest content if you have floats in there.

Other than that, like others have said, a screenshot or some sample code would help. Take a screenshot and obscure anything sensitive. This is a little hard to visualize.

1 Like

Thanks for your reply, zack1. Before I look into your comments, I will first provide an example to save time in case any of you can spot something obvious straight away, as I am only very new to this. Thanks.

The background only appears for the content that’s there and if you click on the first and second items in the list, this will show you how the background then appears for those items only and not permanently present all the way down the page.

All the correct coding has been done by user Paul_Wilkins; the centring was done by me, so that is why it doesn’t work! Hahah.

Thanks.

Hi,

You’ve already been given the answer a couple of times now but obviously missed the important concepts or perhaps glossed over them:)

Ron even provided a working example which you must have copied incorrectly as it does do what you want.

In your fiddle add the following code and then let us know if that was not what you wanted?

html,body{
  margin:0;
  padding:0;
  height:100%;
}
.main{
  min-height:100%;
  min-height:100vh;
 box-sizing:border-box;
  }

To make a main container span the height of the viewport you can use min-height:100vh (not height (never use height unless you know why you can)). Only modern browsers understand vh so for a fall back you set html and body to height:100% (because they can overflow without consequence in this example) and then use min-height:100% on the main-container as in the code I supplied above,

If you do a search on the forums for height:100% I have written extensively about how you can or cannot use it as it is quite a complicated subject :slight_smile:

4 Likes

Thanks PaulOB.

At my end, I’m still having the same issue as I stated in my post #8 to ronpat. i.e. only the viewable area of the screen is orange, no further down. I have added several more options to the list to show the effect better. If you scroll down the page, is all of it orange at your end? You mentioned that only modern browsers understand vh; I am still using an an ancient version of Firefox, so maybe it’s just at my end. I am unable to upgrade at the moment as my pc won’t let me, but will be able to test it on IE9/10 in a few days.

Thanks.

In the fiddle you posted that is not true and the orange now goes to the bottom of the viewport. The code I gave you should work back to IE6 anyway but generally I don’t support less than IE11 these days and neither should you. (Old browsers are a serious security hazard and no one should use them. The recent ransom-ware attacks that brought many large financial institutions to a halt a few weeks ago was caused by old software and we should now actively encourage our users to upgrade to safer alternatives.)

You do have some collapsing margins issues which push the orange down the page a bit and this can be fixed by adding 1px top and bottom padding to the main container.

The fiddle should be working in any version of Firefox made in this century so maybe you haven’t cleared your cache or you have a corrupted cache perhaps.

Don’t rely on one browser when developing either. You should have at least one of each of the major browsers (latest versions) on your system to test with. Otherwise your tests are pointless as you are just testing for your self and no one else.:slight_smile:

Lastly, you should also test in a real environment as ‘fiddles’ are ok for quick tests but don’t always give the accurate picture. I find ‘codepen’ much better than a fiddle anyway and more reliable.

5 Likes

Notwithstanding, that your code has numerous coding
errors which would cause validation failure, the solution
to your actual problem is to simply change this…

#categories [type="checkbox"] {
  position: absolute;
  left:  -9999px;
 }

…to this

#categories [type="checkbox"] {
  position: absolute;
  top:  -9999em;
 }

Job done, we can all go home. :sunglasses:

coothead

3 Likes

PaulOB, yes, I know, sorry, but I have no choice at the moment; I am stuck with a very old Firefox as my pc currently will not let me install a more recent OS and thus browser. I have been so busy with this that I just haven’t had the time to fix my pc! It is a Linux pc, thus I don’t have IE, however, the finished webpage will be used on IE9 and 10, so everything needs to work correctly on those.

At my end, indeed, the orange background fell short.

Yes, my own tests are all local file based; I use the fiddle for posting and quick tests as you say.

Ohhhhh coothead! What can I say? Never mind this issue, your tip is what solved another issue I’ve been having and trying to fix for the longest time!!!

As for this issue, the combination of your little tip and ronpat’s and PaulOB’s min-height:100vh; is what made everybody’s suggestion on here work, including my own original code!

Thank you very much, everyone!

Just one final issue, I prefer to have a permanently visible vertical scrollbar (which I do have) as this stops the page from jumping across when it keeps appearing and disappearing when scrolling is needed, however, is there a reason there is a scroll ‘button’ and scrolling on the page if it’s just one page and no content to scroll?

Thanks.

You do not have a permanently visible scrollbar on the viewport as you have no mechanism in place to supply that. You would usually just use html{overflow-y:scroll} and that would do the trick.

There is a vertical scrollbar visible only because you missed the advice I gave about collapsing margins and the margins on your content are collapsing outside the main container and pushing it down making it taller than the viewport and thus giving a scroll when none is needed. Add 1px padding top and bottom to .main to stop the margin-collapse.

1 Like

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.

What happens is a bit tricky.

Even though you set left:-1000px on the inputs, it still took up vertical space due to the labels. The labels are not contained within the input, they are a separate line, and the <p> tags between them.

If you set position:relative on #container instead, the absolute position will be relative to that block and everything works fine.

The solution you used, to position top instead of left, basically just cancels out the fact that something is still taking up vertical space. It just offsets it up instead of left which has no effect vertically.

What surprises me is that even though you have the overflow scroll around the list, the vertical space still affecting the body. I haven’t seen this before, trying to wrap my head around it.

1 Like

Hi,

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. :slight_smile:

2 Likes