Footer on bottom with variable content

Question

I need some logical review on a part-solution I'm not satisfacted with. I have a table on my page (created with DataTables), so there's dynamic content which means the heigth and width of the table may vary. The table is embedded in three div wrappers (and yes, they are necessary) and I have to control the heigth of the outermost one so that the footer stays on the bottom of the page.

JSFiddle: http://jsfiddle.net/5hh9H/158/

This works fine, except when the content-height of the table and the footer-height are less than the window height.

Code I'm referring to:

if ($(window).height() < $("#wrapper").height()) {
    $("#table-container").height($("#wrapper").height());
} else {
    if ($(window).height() > $("#wrapper").height() + $("#footer").height() + 45) {
        $("#table-container").height($(window).height() - $("#footer").height() - 45);
    } else {
        //Don't know, if this is necessary vv
        $("#table-container").height($("#wrapper").height());
    }
}

In that case, the footer is too low so that you can't see it when scrolled to the top. But any altering of the current function doesn't give me this smooth transition from footer moving with bottom to footer stopping beneath table (click "Shrink content!", scroll to bottom and decrease/increase window size). I want the footer to be visible on the bottom when the content is minimized and the page is scrolled to top!

BEFORE

AFTER

I'll give you a strong word of advice: **If it's not absolutely necessary, don't manipulate CSS with Javascript**. Instead, add classes to the elements as necessary - it keeps the CSS where it belongs and is likely more performant...but don't hold me to that. — jonny, Aug 20 '15 at 16:42
But this is necessary, how would a footer know when the page content is to small for it to stay on the bottom? — Innerwolf, Aug 20 '15 at 16:46

score 0 · Answer 1 · edited May 23 '17 at 10:26

See the answers on this question. There are few ways to do it. The accepted answer has the limitation that the footer has to have a fixed height. The answer I proposed does not (not to say my answer is any better, I'm sure it has its own downsides).

For a CSS-only solution that doesn't depend on fixed height, use display: table.

CSS

html, body {
    height: 100%;
}
body {
    display: table;
    width: 100%;
}
.content {
    display: table-row;
    height: 100%;
}
.smallFooter {
    display: table-row;
    height: 1px;
}

HTML

<div class="content">
    <p>Main content goes here.</p>
</div>
<footer class="smallFooter">
    <p>Footer content goes here</p>
</footer>

See it in action with this fiddle

Footer on bottom with variable content

1 Answers1