0

Can anyone please help? I have a page that has a header, main content box and footer. Here’s a link to the page that is in development My Test Page. The problem that I’m having is with what I have called “Background box” (the box in pink with a dark brown top border). I need it to auto-fill the whole screen, right past the footer, but at the moment it just fills the screen up to the fold of the screen, so if I scroll down it doesn’t actually fill the entire screen. I have tried height: auto; and height: 100%; but none of these give the desired effect.

Does anyone have any suggestions as to what I can do to fix this issue? If anyone would like the code I can post it here, but you should be able to view the code through your browser.

heyred
  • 2,031
  • 8
  • 44
  • 89
  • Might be difficult to achieve cross-browser without JS, see this: http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space – greg84 Jun 29 '12 at 09:35
  • better add background-color of body as pink and give separate color for header . – Exor Jun 29 '12 at 09:38
  • close that backgroundbox after footer div ends. – SVS Jun 29 '12 at 09:39

2 Answers2

1

If you want to be sure that the background box will serve as the background to other elements, have you tried nesting those other elements into the background box? For instance:

<div id="backgroundBox"> Background box
    <div id="contentBox">...</div>
    <div id="footer">...</div>
</div>

You could then use some CSS tricks (a negative margin-top, for example) to raise the #contentBox above where the #backgroundBox starts.

necaris
  • 247
  • 2
  • 11
  • Thanks Ill try this, but Ive actually just come up with a workaround. Instead of putting the background box on the bottom, I have reversed the actions. So now I have my body background colour set to pink (before it was white), and the background box to the colour of the "header". And then simple swapped the top-border to be bottom-border. Worked a treat. The suggested answer might be more elegant but this workaround will do for the time being. Thanks for the help – heyred Jun 29 '12 at 09:49
0

Having a quick look at your HTML, I think the absolute positioning is your problem.

The backgroundbox doesn't know how big the document is, as it absolutely positioned, and therefore not really attached to it. So height 100% makes it 100% of the window height, not the document height. You want it to fill the document, not the window, so you have to leave it attached.

Remove the absolute position and follow the advice of necaris, and you should be ok.

Rob Trickey
  • 1,301
  • 11
  • 13