SharePoint Branding: Sicky footer em SharePoint 2010

Após ter pesquisado por uma forma simples de implementar um sticky footer em SharePoint 2010, acabei por não encontrar nada que servisse as minhas necessidades.

Então tentei implementar um eu mesma. Comecei por usar apenas CSS e HTML, mas rapidamente me apercebi que não iria ser suficiente. Tive que juntar JavaScript à receita.

A explicação da solução

Eu apenas reposiciono o footer se o conteúdo da página não for suficientemente grande para colá-lo ao fundo da janela.

Como o SharePoint já usa JavaScript para lidar com a ribbon e com o tamanho da área do conteúdo, posicionar um elemento relativo a outro não é tão simples como à partida possa parecer. Após várias tentativas falhadas encontrei uma solução. O que faço é redimensionar a altura de uma das divs que envolve o conteúdo (div#s4-bodyContainer) para preencher todo o espaço disponível na janela (excluindo o espaço necessário para a ribbon e o footer).

No código também lido com o redimensionamento da janela.

O código da solução

Insira o código do footer imediatamente a seguir ao fim da div#s4-bodyContainer, mesno no final do ficheiro da master page.

<SharePoint:DeveloperDashboard ID="DeveloperDashboard1" runat="server" />
</div> <!-- end of #s4-bodyContainer -->

<div id="footer" class="s4-notdlg">
</div>

Pode adicionar ao footer todos os elementos que necessitar, isso não afectará o resultado. Eu uso a classe s4-notdlg para que o footer não apareça nas caixas de diálogo.

Agora o CSS.

#footer {
    clear: both;
    height: 80px;
    width: 100%;
}

Se deixássemos o código por aqui teríamos um footer que não se colaria ao fim da janela: se a página fosse maior do que a altura da janela então o footer estaria perfeitamente posicionado, senão ficaria a flutuar mesmo por debaixo do fim do conteúdo e entre o fim do footer e o fim da janela ficaria um espaço em branco.

Então para lidar com esta situação usamos JavaScript. Eu usei jQuery, mas pode implementar o código em JavaScript simples.

jQuery(document).ready(function () {
    // on resize
    jQuery(window).resize(function (e) {
        fixFooterPosition();
    });
    
    // on load
    fixFooterPosition();
});

function fixFooterPosition() {    
    var ribbonH = jQuery("#s4-ribbonrow").height();
    var footerH = jQuery("#footer").height(); 
    var windowHeight = jQuery(window).height();
    
    var h = windowHeight - footerH - ribbonH; 
    
    var bodyContainer = jQuery("#s4-bodyContainer"); 
    
    if (h >= bodyContainer.height()) {
        bodyContainer.height(h);        
    }
    else {
        // reset height - important on resizing
        bodyContainer.css("height","auto");
    }
}

O JavaScript explicado

À altura da janela do browser subtraio a altura da ribbon e do footer. Isto dá-me a altura que preciso para que o contentor #s4-bodyContainer preencha o resto da janela. E eu apenas defino a altura do contentor se a sua altura corrente for menor do que a nova altura calculada.

Se altura do #s4-bodyContainer não for alterada então reestabeleço a altura da div para o seu valor original. Isto é essencial para lidar com o redimensionamento da janela.

Algumas tentativas falhadas

Numa primeira versão da solução tentei posicionar o footer absolutamente em relação ao fundo da janela. Isto resultou num comportamento muito estranho, principalmente após redimensionar a janela.

Depois disto, numa versão mais próxima da final, tentei redimensionar a div #s4-bodyContainer ?com uma altura relativa à div #s4-workspace (em vez da altura da janela). Mas como o SharePoint também redimensiona esta janela com JavaScript o resultado não foi o melhor.