Anyone know how Atlassian sizes the height of the splitter div in Confluence?

Question

We use Atlassian's Confluence where I work. The UI displays div called header, an area (div) called splitter and another div called the footer. No matter how you size your window, the footer always appears at the bottom of the page and the splitter always sizes to fill the space between header and footer (even if the content of splitter doesn't fill the space).

Inspecting the css of the footer, it doesn't appear that they are using the typical sticky footer css trick (position: absolute; bottom:0). I'm trying to figure out if they're using javascript to resize things or if they're using some kind of fancy css.

Thanks for whatever help you can offer.

Answer 1

For both the Documentation theme and the newer default theme, Atlassian uses jQuery Splitter Plugin.

See line 355 onwards here and splitterDiv.splitter(splitterOptions); here.

The splitter plugin handles the height of the page elements adding an inline style to the #splitter div.

This means that the footer just sits below that element, hanging tight to the bottom of the page, rather than using the standard sticky footer CSS pattern

Note that on viewport resize, the resizeHandler function here handles the footer formatting on window resize, like so:

    var resizeHandler = function(e){
        var top = splitter.offset().top;
        //TODO: a quick hack to get the splitter to be the right height in ondemand due to the footer difference
        var footer = $("#footer, #studio-footer").outerHeight(true);
        if (!footer)
            footer = 24;
        var wh = $(window).height()-footer;
        splitter.css("height", Math.max(wh-top-splitter._hadjust, splitter._hmin)+"px");
        // ATLASSIAN - only resize components if the window has been resized, or this has been called directly.
        if (!e || e.target == window) splitter.trigger("resize");
    };

This means that the splitter element height is recalculated on resize resulting in the footer being relocated at the bottom of the page once more.