Facebookのツールバーはどのようにしてページの下部に表示されますか？

私はどのようにFacebookがページの下部にそのツールバーを保持するのが好きです。Facebookのツールバーはどのようにしてページの下部に表示されますか？

ブラウザ間の忍者スキルが必要ですか？

彼らのJavaScript/CSSファイルは膨大なので、（学習目的のために）実装を絞り込むのに苦労しています。

出典

2009-07-31 mrblah

あなたが意味し、どのように彼らは、ウィンドウの一番下にそれを置くか、またはどのように彼らはそれが複数のページリクエストによってそこに滞在するのですか？ –

ページの下部にどのように配置しますか？私はあなたが別のページに行くときにリロードしないことを気づかなかった？ – mrblah

ほとんどの場合、そうではありません。彼らはその部分にajaxトリッキーを使用します。 –

with CSSの効果を得ることができます。

出典

2009-07-31 21:18:01

ここに基本的な例があります。いいえ、ブラウザ間の忍者スキルは必要ありません。 =）

<!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>

出典

2009-07-31 21:21:31

は、それを正確に実装した方法ですか？（高いレベルで） – mrblah

それは同じ概念です、はい。 –

Firebugをインストールしてどのようにしたのかが分かります。ウェブ上で興味深いものを見ると、FirebugはそのHTML構造、添付されたCSSを分析する最良の方法であり、CSS/HTML構造を直接変更してその変化の様子を見ることもできます。あなたがウェブサイトで見るものはすべて、単に読むことができます。ソース（HTML、CSS、JavaScript）が配信されることを覚えておいてください:)

出典

2009-07-31 21:31:48 Juri

この解決策は、コンテンツがブラウザウィンドウの下部を超えているページではうまく機能しません。

代わりにこのような何かを試してみてください：

<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>

出典

2009-09-25 16:02:19 Chaz

あなたのコードが食べられたように見えます。「コード」ボタン（1010）を使用して折り返して、消えないようにします。 –

Facebookのツールバーはどのようにしてページの下部に表示されますか？

答えて

関連する問題