Home/ Questions/Q 6621647
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T21:17:39+00:00

Sorry but I can’t get this to work. Should be a quick answer. My

  • 0

Sorry but I can’t get this to work. Should be a quick answer.

My html is laid out like so:

<html>
    <header> 
    ... 
    </header>

    <body> 
        <div class = "background"></div>
        <div class = "content">
        ...
        </div>
    <body>
</html>

The I want the background div to simply place a 1000px background colour down the entire length of the page. The content is then padded 40px on each side, inside this background colour.

The css is like so:

body {
    width:1000px;
    margin-left:auto;
    margin-right:auto;
}

.background {
    position:absolute;
    top:0px;
    width:1000px;
    height:100%;
}

.content {
    min-height:100%;
    padding-left:40px;
    padding-right:40px;
}

I thought it worked like so… The body div would expand to hold the min-height of the .content div. This means that 100% height of the .background div would fill the entire body and so the length of the page. However it does not. It only fills the window height. Where am I going wrong?

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As topek guessed, this will do it:

    html, body{
  height:100%
}

    The reason this works is because percentage CSS heights only work if the parent element has a height defined on it. By adding the above, you’re giving .background‘s parents a height.

    Update: based on OP’s comment, here’s how you would get the .background div to always appear to fill the viewport:

    html, body {
   height: 100%;
   padding: 0;
   margin: 0;   
}

/* Fixed element that takes up entire viewport */
.background {
   position: fixed;
   z-index: 1;
   top: 0;
   left: 0;    

   width: 100%;
   height: 100%; 
}

/* Content that stacks above .background */
.content {
   position: relative;
   z-index: 2;
}

    As .content grows larger than the viewport and the user scrolls, the fixed position of .background will keep it always in view.

    And of course, a handy example.

    • 0