Clever Geek Handbook

Reset position when using position: fixed

I want to create a site where the header and footer (dynamic in height) have a fixed position. Content should start immediately below the heading. I made a quick example . (The yellow and red top positions are the same, I want the yellow DIV to start below the red DIV.)

If you set a fixed header position, the content of the DIV will be placed at the same top position of the header.

For example if you are using float you can use clear: both to reset position, is there also an option for: fixed position?

+3


source to share


6 answers


CSS only solution

Use some method to fill the space that the title occupies at the top of the screen:

  • padding-top:

  • margin-top:

  • position:relative + top:

Then add a separate CSS stylesheet to change height

for regular viewport

and mobile viewport

s.

(Or see below for a JavaScript solution to set an attribute height

dynamically.)

HTML:

<html>
  <body>
    <div id="header">
      Header
    </div>
    <div id="wrapper">
      <p>First Row</p>
      <p>Next row</p>
      <p>...</p>
      <p>Last row</p>
    <div>
  </body>
</html>


CSS (regular version):

#header {
  position:fixed;
  height:100px;
  width:100%;
  background-color:green;
  color:white;
}
#wrapper {
  position:relative;
  top:101px;
}

CSS (mobile version):

#header {
  height:50px;
}
#wrapper {
  top:51px;
}

JavaScript solution

HTML (copy and paste):

<head>
  <style>
    #header {
      position:fixed;
      height:100px; /* try different values here! */
      width:100%;
      background-color:green;
      color:white;
    }
    #wrapper {
      position:relative; /* look Mom no height! */
    }
  </style>
</head>
<html>
  <body>
    <div id="header">
      Header
    </div>
    <div id="wrapper">
      <p>First Row</p>
      <p>Next row</p>
      <p>...</p>
      <p>Last row</p>
    <div>
    <script language="javascript">
      document.getElementById('wrapper').style.top = String(document.getElementById("header").offsetHeight + 1);
    </script>
  </body>
</html>
+1


source


I know this is an old post, but I recently ran into this problem. So just thought I'd share my solution (although I haven't fully tested it yet - add a disclaimer here).

I created another container (div) under the fixed one (at the top of the page) with the same settings, class, etc. and content.

Then I added a style to reset this second div to position: static, visibility: hidden. You don't really need to hide it as it is completely covered by the fixed div; but just in case this is an older browser that doesn't recognize position: fixed.



Either way, this will give you a buffer area above your content, which should always be the correct height. The downside is that if there is dynamic content then it will be included twice in your page for that area, but you need that content to make sure the hidden div is the correct height.

Not a perfect solution, but the best I can think of ... bar using javascript.

+3


source


use z-index (css) for one div to do this: z-index: -1; for another z-index: 1;

http://www.w3schools.com/cssref/pr_pos_z-index.asp

0


source


I think you want to add a margin-top equal to the height of your heading. Do the same for the margin to place the footer.

0


source


You must use padding-top

and padding-bottom

. In your example, if you add style padding-top: 25px;

to the style, it will appear below the top fixed div.

As you know, the fixed position appears in the same place in the browser and does not move as you scroll. The rest of the "normal" content does not depend on fixed positioned elements, so you need to use padding and margins to create some buffer space.

0


source 


    <body>

   <div style="background-color: red; position: fixed;width:100%;">This is a test with position set  to fixed</div>
  <div style="background-color: yellow; height: 1000px;">This is content that should  start beneath the fixed DIV</div>

    </body>
0


source






More articles:


All Articles