Home/ Questions/Q 9140449
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T09:31:04+00:00

I am having a strange problem with CSS 100% height. The site of my

  • 0

I am having a strange problem with CSS 100% height. The site of my site is as follows:

<html>
  <body>
    <div id="container">
      <div id="header"></div>
      <div id="content"></div>
    </div>
  </body>
</html>

I am trying to get container to have a minimum height of 100% so my CSS is as follows:

html { min-height: 100%; }
body { height: 100%; }
#container { height: 100%; }

The problem is, #container does not fill 100% of the height and only expands according to how much content is in #header and #content, and if #header and #content are empty or removed, #container does not expand at all.

I feel like I have to be overlooking something very simple, but have been looking at this forever and am at a dead end! Can someone point out the problem?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Percentage Heights:
    To set a percentage height to #container, its parent elements must have a specific height. In this case, the specific effect you want can be accomplished using either height:100% or min-height:100%. To achieve either of these, every ancestor of #container must have a height or min-height of 100%.

    html, body, #container {
    height: 100%;
}

    OR

    html, body, #container {
    min-height: 100%;
}

    JS Fiddle Example

    Using min-height vs. height: Within the narrow scope of your question, they will have the same effect. But on a page that has both a height and min-height:

    • If min-height is greater than height (whether specified or unspecified), the min-height will be used.
    • If height is greater than min-height (whether specified or unspecified), the height will be used.

    If there is a max-height specified (e.g. #container { max-height: 50px }) this would overrule height. However, max-height cannot overrule min-height. Read more at this link.

    NOTE: min-height is not supported by some versions of Internet Explorer.

    • 0