7

Facebookがそのツールバーをページの下部に保持している点が気に入っています。

それには、クロスブラウザーの忍者スキルが必要ですか?

彼らのJavaScript / CSSファイルは巨大なので、実装を絞り込むのに苦労しています (学習用)。

4

4 に答える 4

8

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

于 2009-07-31T21:18:01.907 に答える
4

これが基本的な例です。いいえ、クロスブラウザの忍者スキルは必要ありません。=)

<!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-31T21:21:31.743 に答える
1

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

于 2009-07-31T21:31:48.650 に答える
0

このソリューションは、ブラウザウィンドウの下部を超えてコンテンツが拡張されているページではうまく機能しません。

代わりに次のようなものを試してください。

<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-25T16:02:19.563 に答える