position fixed header in html

Question

I have a header (dynamic height) with a fixed position.

I need to place the container div right below the header. As the header height is dynamic, I can't use the fixed value for top margin.

How can this be done?

Here's my CSS:

#header-wrap {
    position: fixed;
    height: auto;
    width: 100%;
    z-index: 100
}
#container{ 
    /*Need to write css to start this div below the fixed header without mentioning top margin/paading*/
}

...and HTML:

<div id="header-wrap">
  <div id="header">
    <div id="menu">
      <ul>
      <li><a href="#" class="active">test 0</a></li>
      <li><a href="#">Give Me <br />test</a></li>
      <li><a href="#">My <br />test 2</a></li>
      <li><a href="#">test 4</a></li> 
      </ul>
    </div>
    <div class="clear">
    </div>
  </div>
</div><!-- End of header -->

<div id="container">
</div>

The fixed header isn't part of the layout. It's floating. You need to give the content a `margin-top` so that it acts as if the header was there. — Blender, Jun 11 '12 at 06:25
read this http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ — sandeep, Jun 11 '12 at 06:28
Possible duplicate of [CSS-Only Scrollable Table with fixed headers](http://stackoverflow.com/questions/11891065/css-only-scrollable-table-with-fixed-headers) — Max Alexander Hanna, Apr 21 '17 at 14:43

micnic · Answer 1 · 2012-06-11T06:53:09.807

64

Your #container should be outside of the #header-wrap, then specify a fixed height for #header-wrap, after, specify margin-top for #container equal to the #header-wrap's height. Something like this:

#header-wrap {
    position: fixed;
    height: 200px;
    top: 0;
    width: 100%;
    z-index: 100;
}
#container{ 
    margin-top: 200px;
}

Hope this is what you need: http://jsfiddle.net/KTgrS/

edited Jun 11 '12 at 06:53

answered Jun 11 '12 at 06:31

micnic

10,915
5
44
55

1

Yes it is out side. but i cant fix the margin top since the content in the header varies from page to page dynamically, where there is less content then the gap between the header and the container will be more – Sowmya Jun 11 '12 at 06:32
1

do you know what css position does? he wants a fixed element relative to the display – micnic Jun 11 '12 at 06:59
6

One way to get around requiring Javascript to measure and adjust the margin top is to just duplicate the content in the header. Put one copy in a "visibility:hidden" styled div that's still part of the page and the other as "position:fixed". – James Nov 29 '13 at 01:07
and this is the real answer here, James :) thanks. However, in some cases it might be hard to duplicate one, and it also might not resize in the same way, so still a bit of risk – mikus Feb 05 '16 at 11:39
1

How can this be considered a valid answer when the question specifies dynamic height? This answer assumes a fixed height. – ESR Aug 31 '17 at 06:51

score 7 · Accepted Answer · edited Sep 13 '16 at 05:26

7

Well! As I saw my question now, I realized that I didn't want to mention fixed margin value because of the dynamic height of header.

Here is what I have been using for such scenarios.

Calculate the header height using jQuery and apply that as a top margin value.

var divHeight = $('#header-wrap').height(); 
$('#container').css('margin-top', divHeight+'px');

Demo

edited Sep 13 '16 at 05:26

marc_s

732,580
175
1,330
1,459

answered Sep 12 '16 at 09:07

Sowmya

26,684
21
96
136

score 3 · Answer 3 · answered Mar 05 '13 at 10:20

body{
  margin:0;
  padding:0 0 0 0;
}
div#header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:25;
}
@media screen{
 body>div#header{
   position: fixed;
 }
}
* html body{
  overflow:hidden;
} 
* html div#content{
  height:100%;
  overflow:auto;
}

score 2 · Answer 4 · answered Jun 11 '12 at 06:32

I assume your header is fixed because you want it to stay at the top of the page even when the user scrolls down, but you dont want it covering the container. Setting position: fixed removes the element from the linear layout of the page however, so you would need to either set the top margin of the "next" element to be the same as the height of the header, or (if for whatever reason you don't want to do that), put a placeholder element which takes up space in the page flow, but would appear underneath where the header shows up.

score 2 · Answer 5 · answered Jun 11 '12 at 07:26

2

The position :fixed is differ from the other layout. Once you fixed the position for your header, keep in mind that you have to set the margin-top for the content div.

answered Jun 11 '12 at 07:26

RAN

1,443
3
19
30

score 0 · Answer 6 · answered Jun 11 '12 at 10:25

0

set #container div top to zero

#container{ 


 top: 0;



}

answered Jun 11 '12 at 10:25

stay_hungry

1,448
1
14
21

position fixed header in html

6 Answers6

Linked