1

On my page I have two DIVs, "main" and "footer":

<div id="main"> stuff... </div>

<div id="footer"> stuff... </div>

I aligned <div id="footer"> to the bottom of the page this way:

#footer {
   position: fixed; 
   width:100%;
   bottom:0;
}

What's the best way to make <div id="main"> take up all the space from top of page to top of <div id="footer"> ?

For the special case where the window is so small that <div id="footer"> takes up the entire page space, <div id="main"> can be moved off the page entirely, or be aligned at the top of the page, I don't care as long as it doesn't break anything.

Edit: Is it possible to do this using CSS only ?

I can't set the height of the "footer" to a fixed value, it must be determined by the browser based on its content.

b_yang
  • 109
  • 6
  • think about the problem differently: don't fix the footer but make the main fill the remaining space and the footer will get automatically fixed at the bottom – Temani Afif Mar 11 '23 at 09:28

2 Answers2

-1

Since you haven't specified the height of the footer let's just assume it has a height of 5rem. (you could set it to pixels if you wish ) Please notice how to calc function was used in the height of the main section to subtract 5rem allocated to the height of the footer.

     * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .container {
        height: 100vh;
      }

      #main {
        height: calc(100% - 5rem);
        border: 2px solid indianred;
      }
      #footer {
        position: fixed;
        width: 100%;
        bottom: 0;
        border: 5px solid skyblue;
        height: 5rem;
      }
  <body>
    <div class="container">
      <div id="main">stuff...</div>
      <div id="footer">stuff...</div>
    </div>
  </body>
colin
  • 49
  • 7
  • I'd rather not fix the height of #footer myself. – b_yang Mar 11 '23 at 05:10
  • If that's the case then set the height of the main section to 100% and since the height of the footer is based on it's content do not specify it's height (Leave the height blank). – colin Mar 11 '23 at 20:26
-1

I wanted to keep the CSS simple so I have set the height of both the footer and header heights in percentages. This way the height and width would stay the same for all the devices.

#footer {
  position: fixed; 
  width:100%;
  bottom:0;
  background-color: cyan;
  height: 20%; 
}
#main{
  position: fixed; 
  width:100%;
  height: 80%;
  background-color: pink;
}
Spa4k
  • 13
  • 6
  • The footer height is fixed, I can't set it to a percentage. I suppose I can use javascript to get the actual height of #footer and adjust #main, but I wonder if there's a way to do it in CSS. – b_yang Mar 11 '23 at 05:03
  • What I mean is I want the browser to determine the height of footer, not hard code it myself. – b_yang Mar 11 '23 at 05:11