6

Fixed header and footer with dynamic heights and scrollable content

over 4 years ago from , Freelance Web Developer

I want to code a page with a header and a footer both fixed and a scrollable content between them. Of course, I don't want use JS for that.

If you google this query, you find implementations which always require you to manually set the header and footer heights. Unfortunately I don't know these heights in advance. I am trying to implement this template without setting these heights.

Here is my attempt: http://jsfiddle.net/jgmoy4a3/

In this code, the header and footer heights are set automatically, and the content uses all the space left. This code works on Chrome and Safari, but not on Firefox. Do you have any ideas to make it work on Firefox?

9 comments

  • Samuel MarksSamuel Marks, over 4 years ago

    You might have better luck getting an answer if you post the question to Stack Overflow, where the community is much larger than this one.

    5 points
    • Julian LloydJulian Lloyd, over 4 years ago

      Please pardon my bluntness, but this is litter.

      I’m surprised moderators allow this type of content to be posted, and worse, that this was upvoted!

      I commend your polite nudge towards a far more appropriate channel for a question like this.

      3 points
  • Vince SpeelmanVince Speelman, over 4 years ago

    Are you okay with flexbox?

    http://codepen.io/VinSpee/pen/zxBJVO

    3 points
  • Dillon RaphaelDillon Raphael, over 4 years ago

    header { position: absolute; top: 0; width: 100%; }

    footer { position: absolute; bottom: 0; width: 100%; }

    Then just set some top and bottom margins for the content div. That's how I deal with sticky footers and headers.

    Hope this is what you mean.

    0 points
  • Daniel FischerDaniel Fischer, over 4 years ago

    Yeah I actually have this exact question too.

    http://jsfiddle.net/dfischer/0vv1xdjr/

    Once content expands on top, it pushes the scrollable content to not be able to view everything at once anymore. The only way to fix this is to code in a hard offset which sucks and is not maintainable in a large application.

    Is the only solution flexbox?

    0 points
  • Josh Sanders, over 4 years ago (edited over 4 years ago )

    Hey there! Here is a fiddle that I based off of yours, with the changes implemented that I'm listing below:

    http://jsfiddle.net/ug8g71wm/

    1. You don't need the display: table; and table-row properties, as they aren't doing anything for you.

    2. instead of using classes of .header and .footer, why not just use the and elements.

    3. to have the header and footer fixed, just apply position: fixed; and then set the width to 100% and then your top, left, right, and bottom numbers respectively.

    4. Lastly, i added some padding to the .content wrapper, which is needed to push the content from behind the fixed position headers and footers.

    Hope this helps! Everything i just mentioned you can view in the fiddle i linked to

    EDIT it's important to note that while the height is not set for the header and footer, the width NEEDS to be set to 100%. Also, i added a slight bit of padding to the header and footer so that the content inside of them has some breathing room—this affects the height of those element, but there is no set height for them.

    0 points
    • Vince SpeelmanVince Speelman, over 4 years ago

      Having to set vertical padding on the content completely destroys the notion of a dynamic height header and footer. It's now essentially static, because you have to adjust the size of the content's padding whenever the header or footer changes.

      0 points