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    lt div id  header-wrap  gt     lt div id  header  gt       lt div id  menu  gt         lt ul gt         lt li gt  lt a href     class  active  gt test 0 lt  a gt  lt  li gt         lt li gt  lt a href     gt Give Me  lt br   gt test lt  a gt  lt  li gt         lt li gt  lt a href     gt My  lt br   gt test 2 lt  a gt  lt  li gt         lt li gt  lt a href     gt test 4 lt  a gt  lt  li gt          lt  ul gt       lt  div gt       lt div class  clear  gt       lt  div gt     lt  div gt   lt  div gt  lt  -- End of header -- gt    lt div id  container  gt   lt  div gt

User · Answer

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

User · Answer

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

User · Answer

body    margin 0    padding 0 0 0 0    div header    position absolute    top 0    left 0    width 100     height 25     media screen   body gt div header     position  fixed         html body    overflow hidden       html div content    height 100     overflow auto

User · Answer

set  container div top to zero   container      top  0

User · Answer

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

User · Answer

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

[jquery] position fixed header in html

Examples related to jquery

Examples related to html

Examples related to css