Css 如何将div定位在可变位置

我有一种感觉，这可能是不可能使用严格的CSS，但，这里的情况。首先，我宁愿不使用JQuery，因为我正在尝试为Google Chrome编写CSS扩展，据我所知，我不能使用JQuery

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

基本上，到目前为止，我有：

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

#标题{位置：固定；宽度：100%；顶部：0px；左侧：0px；}
div.content{position:relative；}

这样，“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>

#标题{位置：固定；宽度：100%；顶部：0px；左侧：0px；}
div.content{position:relative；top:50px；}

这样做的问题是“收割台”没有定义的高度。是否可以将“top”的属性设置为“header”的高度，即

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

#标题{位置：固定；宽度：100%；顶部：0px；左侧：0px；}
div.content{position:relative；top:#header.height；}

或者类似的

页面加载后，“页眉”的高度不会改变。未定义高度的原因是因为上面有图像，“页眉”的高度取决于图像的高度，而图像的高度取决于访问的页面

如果我的问题不清楚，或者已经回答了，我道歉，我已经找了大约一个小时了，没有找到一个没有说“使用JQuery”的答案。正如我在开始时所说，我相当肯定严格使用CSS是不可能做到的，但如果是，请帮助。此外，如果可以使用JQuery为Google Chrome编写扩展，我不介意在这方面提供帮助

顺便说一句，我没有制作这个网站。我想为Chrome做一个扩展，供我个人在网站上使用。

---

我希望能够访问页眉上的链接，无论我在页面下方滚动了多远，从而使其固定。

您应该在JSFIDLE上尝试此功能，以便人们能够更好地了解它。

使用jquery的Chrome扩展：

要显式地设置位置，必须使用jquery

你也可以使第二个div固定的位置，只是淡出它的滚动？不需要jquery

像这样：

var heightofirstdiv=document.getElementById（“firstDiv”）.OffsetHeight；
document.getElementById（“secondDivHolder”）.innerHTML=（“我们这里有多么激动人心的第二个框架”）；​

谢谢，这些应该会有帮助。我已经试着将第二个div设置为固定的，但它并没有按照我想要的方式工作，但是谢谢你的建议。这回答了你的问题吗？如果是这样的话，请检查我的答案：）通过说你可以让第二个div淡出，我的意思是你可以使用不属于jQuery的javascript来实现你想要的。我已经更新了我的答案谢谢你的帮助，我现在已经设法让它工作了，我尝试了jquery，当我在打包之前测试扩展时，它工作了，但是打包后它就停止工作了，我找到了一种使用javascript调用类的方法，现在它似乎工作了。

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>');​