Home/ Questions/Q 7545927
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T09:03:54+00:00

I have a feeling that this probably is not possible using strictly CSS, but,

  • 0

I have a feeling that this probably is not possible using strictly CSS, but, here’s the situation. First off, I would prefer to not use JQuery, as I am trying to write a CSS extension for Google Chrome, and as far as i know i can’t use JQuery.

Anyways, as it is right now there is a div with the id ‘header’, and another with the class ‘content’. They are both static. I want ‘header’ to be fixed at the top of the screen, and ‘content’ positioned relative, below ‘header’.

Basically, I have this so far:

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

With this, ‘header’ is fixed, and ‘content’ is positioned relative, so it will scroll, which is good, but it is behind ‘header’ when the page loads.

Assuming ‘header’ is 50px high, I know it would solve the problem of ‘content’ being behind ‘header’, if I did the following:

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

The problem with doing that is that ‘header’ does not have a defined height. Is it possible to set the property of ‘top’ equal to the height of ‘header’, i.e.

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

or something like that?

The height of ‘header’ does not change once the page has loaded. The reason I the height is not defined is because it has an image on it, the height of ‘header’ is dependent on the height of the image, which is different depending on which page is accessed.

I apologize if my question is unclear, or if it has already been answered, I have been looking for about an hour and haven’t found an answer that does not say ‘use JQuery’. Like I said at the beginning, I am fairly certain this is not possible strictly using CSS, but if it is, please help. Also, if it is possible to use JQuery to write extensions for Google Chrome I wouldn’t mind some help on that one.

P.S. To be clear, I did not make the website. I am wanting to make an extension for Chrome for my own personal use for the website.
I want to be able to access the links on the header no matter how far down the page I have scrolled, thus making it fixed.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Chrome extentions with 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/

    To explicitly be able to set a location, you’d have to use jquery.

    You could also make the second div fixed position as well, and just fade it out on scroll? No jquery required.

    Like So:
    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>');​
    • 0