任何人都知道Atlassian如何确定Confluence中分隔符div的高度？ [英] Anyone know how Atlassian sizes the height of the splitter div in Confluence?

问题描述

我们使用Atlassian的Confluence工作。 UI显示div称为头，一个区域（div）称为分割器，另一个div称为页脚。无论你的窗口大小如何，页脚总是出现在页面的底部，分隔符总是大小填充页眉和页脚之间的空间（即使分隔符的内容不填满空格）。

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).

检查页脚的css，看起来他们没有使用典型的粘性页脚css技巧（位置：绝对;底部：0）。我想知道他们是否使用javascript来调整大小，或者如果他们使用某种花哨的CSS。

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.

感谢您提供的任何帮助

推荐答案

对于这两个文档的主题和新的默认主题，Atlassian的用途的的jQuery插件分配器

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

请参阅行355起的此处和 splitterDiv.splitter（splitterOptions）; 这里。

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

分隔符插件处理页面元素的高度，为 #splitter div添加内联样式。

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

这意味着页脚只是位于元素下方，悬挂在页面底部，而不是使用标准的粘性页脚CSS模式

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

请注意，在viewport resize中， resizeHandler 函数这里处理窗口调整大小的页脚格式，如下所示：

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.

这篇关于任何人都知道Atlassian如何确定Confluence中分隔符div的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！