Position a div relative to a fixed div [closed]

Question

Closed. This question needs debugging details. It is not currently accepting answers.

---

Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.

Closed 3 years ago.

Improve this question

My problem is as follows. I have 3 divs: header, content and footer.

http://jsfiddle.net/5SLk5/

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

I would like to have my header div permanently fixed to the top of my screen, and my bottom div permanently fixed to the bottom, so that when I scroll my page, I'm actually scrolling through my content div, and my header and footer divs are always visible at the top and bottom.

I though I could solve this by giving my header and footer a fixed position, but since my header has an 'auto' height, I don't know how to offset my content so that it is not overlapped by my header.

Here's my CSS:

#header {
  position: fixed;
  width: 100%;

  background-color: red;
}

#content {
  padding-bottom: 100px;

  background-color: blue;
}

#main-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100px;

  background-color: white;
}

As you can see, I was already able to offset my content at the bottom of the page, by giving it a bottom padding of 100px (the height of my footer), but because my header doesn't have a fixed height (it automatically adjusts based on its content), I don't know how to offset it at the top and it gets overlapped by the header. Could anyone help me out?

Answer 1

Use jquery.

fiddle

$(document).ready(function(){
    $("#content").css('padding-top',$("#header").height());
      $(window).resize(function(){
         $("#content").css('padding-top',$("#header").height());
   });
});