Home/ Questions/Q 7755533
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T12:35:35+00:00

I want to make a website where the (dynamic in height) header and footer

  • 0

I want to make a website where the (dynamic in height) header and footer have a fixed position. The content should start directly beneath the header. I made a quick example. (Yellow and red top positions are the same, I want the yellow DIV to start beneath the red DIV.)

If you set the header position to fixed, the content DIV is placed at the same top position of the header.

For example, if you use float, you can use clear: both to reset the position, is there also a possibility for position: fixed?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    CSS Only Solution

    Use some way to pad the space the header takes up at the top of the screen:

    • padding-top:
    • margin-top:
    • position:relative + top:

    Then have a separate CSS style sheet to change height for regular viewports versus mobile viewports.

    (Or see below for JavaScript solution to set the height attribute 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-able):

    <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>
    • 0