Jump to content

Fluid content area


boberell
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...