0

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

检查页脚的 css，似乎他们没有使用典型的粘性页脚 css 技巧（位置：绝对；底部：0）。我试图弄清楚他们是否使用 javascript 来调整大小，或者他们是否使用某种花哨的 css。

感谢您提供的任何帮助。

4

1 回答 1

2

对于 Documentation 主题和较新的默认主题，Atlassian 使用jQuery Splitter Plugin。

请参阅此处和splitterDiv.splitter(splitterOptions); 此处的第 355 行。

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

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

请注意，在视口调整大小时，此处resizeHandler的函数 处理窗口调整大小时的页脚格式，如下所示：

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

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

于 2013-11-11T12:25:40.360 回答