Home/ Questions/Q 9221507
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T03:35:40+00:00

Assume the following html: <!DOCTYPE html> <html> <head> <meta charset=utf-8> </head> <body> <div id=header>

  • 0

Assume the following html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="header">
            <!-- dynamic height -->
        </div>
        <div id="main" style="overflow: scroll;">
            <!--
                contains actual content
                height should be whatever is left over
            -->
        </div>
        <div id="footer">
            <!-- dynamic height -->
        </div>
    </body>
</html>

basically what I want is:

main height = body height - (header height + footer height)

The body and html height is 100%.

As both the height of header and footer are dynamic (will change very frequently), I need a dynamic way to set the height of main, i.e, I can’t specify any of the heights in pixels or percentages.

There are indeed other similar questions, but I am not looking for a “floating/sticky footer”, the main div must have the remaining height.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You MUST specify the height of the footer and the header.

    You can use javascript on document ready to set the height of the footer, header and then the main div.

    Then, use css like this : 

    #header{
  position: absolute;
  top: px;
  height: /*dynamically set by javascript*/;
  left: px;
  right: px;
}

#footer {
  position: absolute;
  bottom: 0px;
  height: /*dynamically set by javascript*/;
  left: 0px;
  right: 0px;
}

#main {
  position: absolute;
  bottom: /* set by javascript with height of footer */;
  top: /* set by javascript with height of header */;
  left: 0px;
  right: 0px;
}
    • 0