css - 如何将div定位在可变位置

Question

我觉得这可能无法使用严格的 CSS，但是，情况就是这样。首先，我宁愿不使用 JQuery，因为我正在尝试为 Google Chrome 编写 CSS 扩展，据我所知我不能使用 JQuery。

无论如何，就像现在一样，有一个 id 为“header”的 div，还有一个类为“content”的 div。它们都是静态的。我希望“标题”固定在屏幕顶部，“内容”相对于“标题”下方定位。

基本上，到目前为止我有这个:

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

有了这个，'header' 是固定的，'content' 是相对定位的，所以它会滚动，这很好，但是当页面加载时它在 'header' 后面。

假设“header”的高度为 50px，我知道如果我执行以下操作，它会解决“content”位于“header”后面的问题:

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

或者类似的东西？

页面加载后，'header' 的高度不会改变。我没有定义高度的原因是因为它上面有一个图像，'header'的高度取决于图像的高度，根据访问的页面不同而不同。

如果我的问题不清楚，或者如果它已经得到回答，我深表歉意，我一直在寻找大约一个小时，但没有找到没有说“使用 JQuery”的答案。就像我一开始说的，我相当确定严格使用 CSS 是不可能的，但如果是的话，请帮忙。此外，如果可以使用 JQuery 为 Google Chrome 编写扩展程序，我不介意在这方面提供一些帮助。

_{附言需要说明的是，我没有制作该网站。我想为 Chrome 制作一个扩展程序，供我个人使用该网站。
无论我将页面向下滚动多远，我都希望能够访问页眉上的链接，从而使其固定。}

Answer 1

使用 jquery 的 Chrome 扩展: 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>');​