可変位置にdivを配置する方法

Question

これはおそらく厳密にはCSSを使用することができないと感じていますが、ここではその状況を示します。まず、私はでなく、を使ってJQueryを使用したいと思います。私はGoogle Chrome用のCSSエクステンションを作成しようとしています。私はJQueryを使うことはできません。

とにかく、今のようにid 'ヘッダー'を持つdivと 'content'クラスを持つdivがあります。彼らはどちらも静的です。私は、 'ヘッダー'を画面の上部に固定し、 'コンテンツ'を相対的に 'ヘッダー'の下に配置します。 「このことは良いしている、スクロールされますので、[ヘッダー]に固定されており、「コンテンツ」は、相対して配置されていると

<style type=text/css> 
    #header  {position: fixed; width: 100%; top: 0px; left: 0px; } 
    div.content {position: relative; } 
</style> 

が、それは背後にある：基本的に

、私はこれまでのところ、これを持っていますページの読み込み時に 'header'

「ヘッダが」は50px高であると仮定すると、私は次のことをやった場合、それは、「ヘッダー」の後ろにいる「コンテンツ」の問題を解決するだろう知っている：

<style type=text/css> 
    #header  {position: fixed; width: 100%; top: 0px; left: 0px; } 
    div.content {position: relative; top: 50px; } 
</style> 

ことをやっての問題は "ということですヘッダー 'には定義された高さがありません。 'top'のプロパティを 'header'の高さと同じに設定することはできますか？つまり、

<style type=text/css> 
    #header  {position: fixed; width: 100%; top: 0px; left: 0px; } 
    div.content {position: relative; top: #header.height; } 
</style> 

などですか？

「ヘッダー」の高さは、ページが読み込まれると変更されません。私が高さが定義されていないのは、イメージがあるためです。ヘッダーの高さはイメージの高さに依存します。イメージの高さは、アクセスするページによって異なります。

私の質問が不明な場合、または既に回答されている場合は、私は約1時間を探していて、 'JQueryを使用する'とは言わない回答は見つかりませんでした。私が最初に言ったように、これは厳密にはCSSを使用することができないと確信していますが、もしそうなら、助けてください。また、Google Chromeの拡張機能を書くためにJQueryを使用することができれば、私はそのことについていくつか助けても構いません。

_{P.明確にするために、私はウェブサイトを作っていませんでした。私は自分の個人的な使用のためにChrome用の拡張機能をウェブサイト用に作りたいと思っています。
私はスクロールしたページのどれくらいの距離に関係なく、ヘッダーのリンクにアクセスできるようにしたいので、固定します。}

Answer 1

これはjsFiddleで試してみてください。そうすれば人々はより良​​いアイデアを得ることができます。 jQueryを使って

Answer 2

クロームextentions： http://strd6.com/2010/02/simple-tutorial-to-make-a-chrome-extension-that-uses-jquery-ui/

http://tutorialzine.com/2010/06/making-first-chrome-extension/

明示的に場所を設定できるようにするには、jqueryのを使用する必要があると思います。

また、2番目のdivを固定位置にしてスクロールするだけでフェードアウトできますか？ jqueryは必要ありません。

ようなので：http://jsfiddle.net/WahQc/11/

var heightOfFirstDiv = document.getElementById("firstDiv").OffsetHeight; 
document.getElementById("secondDivHolder").innerHTML = ('<div id="secondDiv" style="position:absolute;z-index:50;top:' + heightOfFirstDiv + 'px;" > What an exciting second frame we have here </div>');​