0

I'm trying to make a page that contains 3 elements: Header, footer and content. As the names suggest, I want the header stuck to the top, the footer in the bottom, and the content in between. I have already made a layout, which puts the header and footer where they are supposed to be, but the content either overlaps them, or the other way around, where the content is supposed to get smaller instead.

My problem is that the header and footer are going to be used for many different things, and they are therefore dynamic when it comes to height.

Is there any way to make the content fill what space is left between the header and footer, without overlapping any of them?

If possible I would prefer pure CSS, but if that isn't possible, I'd like a JavaScript suggestion as well. :)

Thanks!

EDIT: This is what I got atm.

<div class="container">
    <div id="header"></div>
    <div id="footer"></div>
    <div id="content"></div>
</div>

CSS:

#content {
    position:absolute;
    background: url('img/textures/fabric.png');
    background-color: gray;
    height:auto;
    width:auto;
    margin:0 auto 0 48px; /* Center content */
    left:0;
    right:0;
    top:0;
    bottom:0;
    text-align:center;  
}

#dashtop {
    position:fixed;
    width:auto;
    background-color:aqua;
    opacity: .5;
    margin-left: 48px;
    top:0;
    left:0;
    right:0;
    text-align:center;
}

#footer {
    position: fixed;
    margin-left: 48px;
    background-color:green;
    bottom:0;
    right:0;
    left:0;
    width:auto;
    height:auto;
    text-align:center;
    opacity:0.5;
    z-index:0;

}

Martin
  • 157
  • 1
  • 11
  • That should already be the default behaviour. Remove all height attributes and look whether the result is what you desire. And do not use absolute positioning. – JohnB Aug 22 '12 at 08:51
  • Do you mean that you want a fixed total height for each page and you want the content of the page to shrink when the header and footer are bigger - something like . . . . contentheight=fixedpageheight-headerheight-footerheight ? – DaveR Aug 22 '12 at 08:54
  • Also what you've done already would be useful! – DaveR Aug 22 '12 at 08:55
  • I'm adding a bit of my code. No height is fixed, it's all dynamic, since the page is designed to scale according to the device it's viewed on. So it's more like: contentheight = windowheight - (headerheight + footerheight) – Martin Aug 22 '12 at 09:13
  • And what do you want to do if the window is not high enough to display the header, the content, and the footer? – JohnB Aug 22 '12 at 09:38
  • That won't be the case. I got several css files, which changes the look and feel of the page, depending on the resolution. This would only be for bigger devices, like tablets and dekstops. – Martin Aug 22 '12 at 09:42

1 Answers1

1

Use relative positioning both for header and content (no position attribute), and use fixed positioning for the footer.

JohnB
  • 13,315
  • 4
  • 38
  • 65
  • Okay that actually kind of did it.. Maybe. :) Now my problem is that the content doesn't fill up the space between the header and footer, but only covers what's inside itself. – Martin Aug 22 '12 at 09:46
  • Looks like this now: http://postimage.org/image/mb94vx5sn/ Aqua = Header Gray = Content (Should be expanded all the way down to the footer) Green = Footer Ignore the red, that's just another bar, but that works as intended already, and doesn't interfere with the others. – Martin Aug 22 '12 at 09:50
  • That might help: http://stackoverflow.com/questions/2297453/get-css-div-to-fill-available-height – JohnB Aug 22 '12 at 09:56
  • Okay I have checked the link, (had a few interruptions), and it seems like I can't really use it, since it requires the content to be set as absolute, which makes it ignore the flow and just sit right on top of my header. – Martin Aug 22 '12 at 10:49
  • What for do you need the content to fill the window? – JohnB Aug 22 '12 at 10:54
  • It has a background first of all, so that would look stupid otherwise, and that background needs to move with it, and not get cut off with the bars. I'd rather ask, why would you not make it fill everything? – Martin Aug 22 '12 at 11:00
  • 1
    Just because it would be easier, probably. There http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space you find some JavaScript solutions. – JohnB Aug 22 '12 at 14:49