Question 44199 in Html Question posted in
Some basic documentation can be found here.

With one <div> aligned to bottom of page, how to make another <div> take up rest of the vertical space in page? – Html

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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search