css - 有人知道 Atlassian 如何调整 Confluence 中拆分器 div 的高度吗？

Question

在我工作的地方，我们使用 Atlassian 的 Confluence。 UI 显示称为页眉的 div，一个称为拆分器的区域 (div) 和另一个称为页脚的 div。无论您如何调整窗口大小，页脚始终显示在页面底部，拆分器始终调整大小以填充页眉和页脚之间的空间(即使拆分器的内容未填充空间)。

检查页脚的 css，他们似乎没有使用典型的粘性页脚 css 技巧(position:absolute；底部:0)。我想弄清楚他们是在使用 javascript 来调整大小，还是在使用某种花哨的 CSS。

感谢您提供的任何帮助。

Answer 1

对于文档主题和较新的默认主题，Atlassian 使用 jQuery Splitter Plugin .

从第 355 行开始看 here和 splitterDiv.splitter(splitterOptions); here .

拆分器插件处理页面元素的高度，将内联样式添加到 #splitter div。

这意味着页脚就位于 那个 元素下方，紧贴页面底部，而不是使用标准的粘性页脚 CSS 模式

请注意，在调整视口(viewport)大小时，resizeHandler 函数 here在窗口调整大小时处理页脚格式，如下所示:

    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");
    };

这意味着拆分器元素的高度会在调整大小时重新计算，导致页脚再次重新定位到页面底部。