如何將div放置在可變的位置

我有一種感覺，這可能不是嚴格使用CSS的可能性，但是，這裏是情況。首先，我寧願而不是使用JQuery，因爲我正在嘗試爲Google Chrome編寫CSS擴展，並且據我所知我無法使用JQuery。如何將div放置在可變的位置

無論如何，因爲它是現在有一個與ID'頭'的div，和另一個類'內容'。它們都是靜態的。我希望「標題」固定在屏幕的頂部，「內容」位於「標題」下方的相對位置。

基本上，我有這到目前爲止：

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

藉助於此，「標題」是固定的，和「內容」被相對地定位，所以它會滾動，這是很好的，但它是'後方頁眉加載時。

假設「標頭」是50像素高，我知道這會解決的「內容」幕後主使「頭」的問題，如果我做了以下內容：

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

有這樣做的問題是，'標題'沒有定義的高度。是否有可能設置的屬性「頂」等於「頭」的高度，即

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

或類似的東西？

頁面加載後，「標題」的高度不會改變。我沒有定義高度的原因是因爲它有一個圖像，'標題'的高度取決於圖像的高度，這取決於訪問哪個頁面。

我很抱歉，如果我的問題不清楚，或者它已經被回答，我一直在尋找大約一個小時，並沒有找到答案，不說'使用JQuery'。就像我在開始時所說的，我相當確定這不可能嚴格使用CSS，但如果是這樣，請幫忙。另外，如果可以使用JQuery爲Google Chrome編寫擴展程序，我不會介意在這方面提供一些幫助。

_{P.S.要清楚，我沒有製作網站。我希望爲Chrome個人使用該網站而對Chrome進行擴展。
我希望能夠訪問標題上的鏈接，無論我滾動的頁面有多遠，從而使其固定。}

來源

2012-02-16 Anon

你應該試試這個jsFiddle，這樣人們可以得到一個更好的主意。

來源

2012-02-16 02:55:39 UniAvenger

Chrome的一些推廣使用jQuery： 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。

你也可以製作第二個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>');

來源

2012-02-16 03:03:23 Max

謝謝，這些應該是有幫助的。而且我試圖設置第二個div爲固定的，它並沒有工作，我想要的，但感謝您的建議 – Anon 2012-02-16 03:15:21

這是否回答你的問題？如果是這樣，請檢查我的答案:) 通過說你可以讓第二個div淡出，我的意思是你可以使用不是jQuery的一部分的javascript來實現你想要的。我已經更新了我的答案 – Max 2012-02-16 19:30:15

感謝您的幫助，我已經設法讓它工作，我試過了jquery，而且在我打包之前測試擴展時工作正常，但一旦打包它就停止工作，我想出了一種使用JavaScript調用該類的方法，現在它似乎正在工作。 [示例]（http://jsfiddle.net/JrsJp/） – Anon 2012-02-18 14:45:47

如何將div放置在可變的位置

回答

相關問題