Fluid content area

[boberell]

Need help. I have a header, content area and a footer. I want the content area to be fluid. I set the body { height:100%} and the content area {height:100%;}. I did put a clear:both; on the footer. I also have a background image I want to tile in the content area. It stretches just fine, but the background image does not show. It will only show if I put a actual height to it (i.e.. 100px). How can I get it to show beyond the fixed number?

[dsonesuk]

html, body{ height:100%; margin: 0; padding:0;} header must be in content, and maybe footer also. content min-height: 100%; is about minimum required, the content should be same height as browser window without content, which will stretch the height of content if it exceeds height of browser window. The background image should repeat to same height, as long as no-repeat has been used.

[boberell]

This is what I have right now: html, body {height: 100%;background-color: #C0E5E7;margin:0;} .contentarea {width: 900px;min-height:100%;height:100%;background-image:url(../contentarea.gif);background-repeat:repeat-y;} I do not have the header inside the .contentarea but I do have the footer inside it. Am I missing something?

[boberell]

Ok, this is my fault on this. I forgot to mention that I also had a wrapper <div> to contend with. I had set the width but not the height. Once I put the height into the wrapper. Everything worked just dandy. Hope that helps anyone else who has this problem.

[dsonesuk]

background-repeat:repeat-y;} will only repeat down the screen once, repeat-x across the screen once, repeat (default) repeats across and down. if content min-height 100%, the content will fill entire screen, anything above it will force the content out of view of the same height of the header, below it the footer be out by height of header PLUS total height of browser window. until you scroll down.You therefore ideally require header inside the content container, and if you want a sticky footer, ie will show when little content, at bottom of screen, but move with content as it increases beyond screen height, you will have to insert a inner container to hold content with padding the same height as footer, then use margin-top: minus the height of footer for the footer.