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'后面。

假设'标题'高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>

或类似的东西？

页面加载后，“标题”的高度不会更改。我没有定义高度的原因是因为它上面有一个图像，'header'的高度取决于图像的高度，这取决于访问哪个页面。

如果我的问题不清楚，或者问题已经得到解答，我道歉，我一直在寻找大约一个小时但没有找到一个不会说“使用JQuery”的答案。就像我在开头说的那样，我相当肯定这不可能严格使用CSS，但如果是，请帮忙。此外，如果可以使用JQuery为Google Chrome编写扩展程序，我不介意对此进行一些帮助。

<子> P.S。要清楚，我没有成为网站。我想为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>');

Answer 2

你应该在jsFiddle上尝试这个，这样人们就可以有更好的想法。

如何将div定位在可变位置

2 个答案: