0

私が働いている場所では Atlassian の Confluence を使用しています。UI には、ヘッダーと呼ばれる div、スプリッターと呼ばれる領域 (div)、およびフッターと呼ばれる別の div が表示されます。ウィンドウのサイズに関係なく、フッターは常にページの下部に表示され、スプリッターは常にヘッダーとフッターの間のスペースを埋めるようにサイズ変更されます (スプリッターのコンテンツがスペースを埋めなくても)。

フッターの css を調べると、典型的なスティッキー フッター css トリック (位置: 絶対; 下:0) を使用しているようには見えません。彼らがjavascriptを使用してサイズを変更しているのか、それともある種の派手なcssを使用しているのかを把握しようとしています。

あなたが提供できるどんな助けにも感謝します。

4

1 に答える 1

2

ドキュメンテーション テーマと新しいデフォルト テーマの両方で、アトラシアンはjQuery スプリッター プラグインを使用します。

355 行目以降を参照してくださいこことsplitterDiv.splitter(splitterOptions); ここ.

#splitter分割プラグインは、 divにインライン スタイルを追加するページ要素の高さを処理します。

これは、標準の固定フッター 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 に答える