Hundred Percent Height

文章来源：http://css-discuss.incutio.com/wiki/Hundred_Percent_Height

1. Guide

　　Setting a div to fill up the whole window is not as simple as setting it's height to 100%. The reason this doesn't work is that percentages (when used as the unit on height or width; text size is another story) are relative to their parent dimensions. If you haven't set a height on the parent, the div with 100% height has nothing upon which to base its own height.

　　The other problem is that you probably don't really want 100% height. You probably want a minimum height of 100%. This means that if your page is longer than the viewport (browser window), the background of the div will still continue with the content. The body element equates to the viewport, so if you set something to 100% of the viewport, it will only take up the viewport, and stop at the height of the browser window. min-height is what you really want.

　　CCS2.1: 

　　height: [percentage]

　　　　Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block.(it is the page area for paged media) Note: For absolutely positioned elements whose containing block is based on a block-level element, the percentage is calculated with respect to the height of the padding box of that element. This is a change from CSS1, where the percentage was always calculated with respect to the content box of the parent element.

　　　　Note that the height of the containing block of an absolutely positioned element is independent of the size of the element itself, and thus a percentage height on such an element can always be resolved. However, it may be that the height is not known until elements that come later in the document have been processed.

 

2. Solution

　　a. CSS

html, body {
height: 100%;
}
#container { /* this is the div you want to fill the window */
min-height: 100%;
}

　　Internet Explorer (IE) 6 and below doesn't support min-height(but they treat height like min-height), so it needs to be hacked. Add this to your stylesheet:

<!--[if lte IE 6]>
<style type="text/css">
#container {
height: 100%;
}
</style>
<![endif]-->

　　b. If you don't mind permanent scrollbars on the right side of your browser just give the div a constant height that is bigger than the browserdisplay:

#container { /* this is the div you want to fill the window */
height: 2000px;
}

　　c. JavaScript

var isIE5=navigator.userAgent.toUpperCase().indexOf("MSIE 5")!=-1;

var targetElementID="contents", targetElementStyleOffset=80;

function adjustHeight() {
  if (document.getElementById) {
    var targetElement=document.getElementById(targetElementID),
        documentHeight, totalOffset;

    if (targetElement) {
      documentHeight=document.documentElement.offsetHeight;
      if (targetElement.offsetHeight<documentHeight-targetElement.offsetTop) {
        if (isIE5)
          totalOffset=targetElement.offsetTop;
          else totalOffset=targetElement.offsetTop+targetElementStyleOffset;
        targetElement.style.height=String(documentHeight-totalOffset)+'px';
      }
    }
  }
}

window.onresize=adjustHeight;
window.onload=adjustHeight;