I am seeking a logical review of a partial solution that I am not satisfied with. There is a table on my page created using DataTables, so the dynamic content means that the height and width of the table can vary. The table is wrapped in three div elements (which are necessary), and I need to control the height of the outermost div so that the footer remains at the bottom of the page.
Check out my JSFiddle for reference: http://jsfiddle.net/5hh9H/158/
This setup works well, except when both the content height of the table and the footer height are less than the window height.
The specific code I am addressing is:
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 {
// Unsure if this section is necessary vv
$("#table-container").height($("#wrapper").height());
}
}
In this scenario, the footer appears too low and cannot be seen when scrolled to the top. Any adjustments I make to the current function do not provide the desired smooth transition from the footer moving along with the bottom to stopping below the table (try clicking "Shrink Content!", scrolling to the bottom, and resizing the window). My goal is for the footer to remain visible at the bottom when the content is minimized and the page is scrolled to the top!