Como o Facebook manter essa barra de ferramentas na parte inferior da página?

StackOverflow https://stackoverflow.com/questions/1214929

  •  06-07-2019
  •  | 
  •  

Pergunta

Eu gosto de como Facebook mantém essa barra de ferramentas na parte inferior da página.

O que exigem habilidades ninja cross-browser?

O JavaScript / arquivos CSS são enormes, por isso estou tendo um momento difícil estreitar a implementação (para fins de aprendizagem).

Foi útil?

Solução

Você pode conseguir o efeito com CSS .

Outras dicas

Aqui está um exemplo básico. Não, ele não necessita de cross-browser ninja skillz. =) 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Facebook Bar</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#page {
margin: 10px;
overflow: auto;
height: 93%;
}
#bottom {
width: 100%;
background: #18f8f8;
text-align: center;
}
</style>
</head>
<body>
<div id="page">
    Other stuff on page
</div>
<div id="bottom">Bottom stuff goes here</div>
</body>
</html>

O melhor é instalar Firebug e ver como eles fizeram isso. Quando vejo coisas interessantes na web, o Firebug é a melhor maneira de analisá-lo da estrutura de HTML, CSS anexado e você ainda pode modificar diretamente a estrutura CSS / HTML para ver como ela muda. Tudo que você vê em um site pode ser simplesmente ler. Lembre-se, a fonte (HTML, CSS, JavaScript) é entregue com ele:)

Essa solução não funciona bem para páginas que tenham conteúdo que se estende além da parte inferior da janela do navegador.

Tente algo parecido com isto em vez disso: 

<div style="display: block;
position: fixed;
text-align: center;
    z-index:1000;
bottom: 0;
left: 0;
width: 100%;
color: #999999;
clear: both;
height: 15px;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #b5b6b5;
background-repeat: repeat-x;
border-right-style: solid;
border-left-style: solid;
border-right-width: 1px;
border-left-width: 1px;
border-right-color: #b5b6b5;
border-left-color: #b5b6b5;
background-color: #e7e7e7;"></div>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top