title: height:100% not working in Internet Explorer
body: <p>I have a question about the CSS property <code>height:100%</code> in Internet Explorer.</p>
  
  <p><code>height:100%</code> does not work in IE, but it does in Firefox and Chrome.</p>
  
  <p>HTML File : </p>
  
  <pre><code>&lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
  &lt;html style="height:100%;"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;link rel="stylesheet" href="style.css" type="text/css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="menu_neu"&gt;
          &lt;ul id="topNav"&gt;
              &lt;li class="current"&gt;&lt;a href="#section-1"&gt;SECTION 1&lt;/b&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#section-2"&gt;SECTION 2 &lt;/b&gt;&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="wrapper"&gt;
          &lt;!--SECTION- 1 .....................................................................................................................................--&gt;
          &lt;div class="section" id="section-1"&gt;SECTION - 1
              &lt;div style="height:100%;" id="intro"&gt;
                  &lt;div class="story"&gt;
                      &lt;div class="bg1"&gt;&lt;/div&gt;
                      &lt;div class="bg2"&gt;&lt;/div&gt;
                      &lt;div class="bg3"&gt;&lt;/div&gt;
                      &lt;div class="float-left" style="margin-top:120px; width:500px;"&gt;
                           &lt;h2&gt;HEIGHT 100% works in Chrome and Firefox,&lt;br&gt; &lt;b&gt;but not in IE!&lt;/b&gt;&lt;/h2&gt;
  
                          &lt;div id="s1Pfeil1" style="padding-top:120px;padding-left:255px;"&gt; &lt;a href="#second" title="Next Section"&gt;&lt;img src="images/icon_down_normal.png" alt="Next" /&gt;&lt;/a&gt;
  
                          &lt;/div&gt;
                          &lt;!--/box-links--&gt;
                      &lt;/div&gt;
                      &lt;!--/float-left--&gt;
                  &lt;/div&gt;
                  &lt;!--./story--&gt;
              &lt;/div&gt;
              &lt;!--/intro--&gt;
              &lt;div style="height:100%;" id="second"&gt;
                  &lt;div class="story"&gt;
                      &lt;div class="bg1_2"&gt;&lt;/div&gt;
                      &lt;div class="bg2_2"&gt;&lt;/div&gt;
                      &lt;div class="bg3_2"&gt;&lt;/div&gt;
                      &lt;div class="float-right" style="margin-top:45px; width:500px;"&gt;
                              &lt;h2&gt;HEIGHT 100% works in Chrome and Firefox,&lt;br&gt; &lt;b&gt;but not in IE!&lt;/b&gt;&lt;/h2&gt;
  
                          &lt;div id="s1Pfeil2" style="padding-top:200px;padding-left:225px;"&gt;   &lt;a href="#intro" title="Before Section"&gt;&lt;img src="images/icon_up_normal.png" alt="Next" /&gt;&lt;/a&gt;&amp;nbsp;&amp;nbsp;&lt;/a&gt;  &lt;a href="#third" title="Next Section"&gt;&lt;img src="images/icon_down_normal.png" alt="Next" /&gt;&lt;/a&gt;&lt;/a&gt;&amp;nbsp;&amp;nbsp;&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;!--/box-links1--&gt;
                      &lt;/div&gt;
                      &lt;!--/float-right--&gt;
                  &lt;/div&gt;
                  &lt;!--./story--&gt;
              &lt;/div&gt;
              &lt;!--#second--&gt;
              &lt;div id="third" style="height:100%;"&gt;
                  &lt;div class="story"&gt;
                      &lt;div class="bg1_3"&gt;&lt;/div&gt;
                      &lt;div class="bg2_3"&gt;&lt;/div&gt;
                      &lt;div class="bg3_3"&gt;&lt;/div&gt;
                      &lt;div class="float-left" style="margin-top:80px; width:500px;"&gt;
                              &lt;h2&gt;HEIGHT 100% works in Chrome and Firefox,&lt;br&gt; &lt;b&gt;but not in IE!&lt;/b&gt;&lt;/h2&gt;
  
                          &lt;div id="s1Pfeil3" style="padding-top:200px;padding-left:225px;"&gt;   &lt;a href="#second" title="Next Section"&gt;&lt;img src="images/icon_up_normal.png" alt="Next" /&gt;&lt;/a&gt;
  
                          &lt;/div&gt;
                          &lt;!--/box-links2--&gt;
                      &lt;/div&gt;
                      &lt;!--/float-left--&gt;
                  &lt;/div&gt;
                  &lt;!--.story--&gt;
              &lt;/div&gt;
              &lt;!--#third--&gt;
          &lt;/div&gt;
          &lt;!--/section1--&gt;
          &lt;!--SECTION- 2 BRANDSTIFTER..................................................................................................................................--&gt;
          &lt;div class="section" id="section-2"&gt;SECTION -2
              &lt;div id="intro_bs"&gt;
                  &lt;div class="story_bs"&gt;
                      &lt;div class="bg1_bs"&gt;&lt;/div&gt;
                      &lt;div class="bg2_bs"&gt;&lt;/div&gt;
                      &lt;div class="bg3_bs"&gt;&lt;/div&gt;
                      &lt;div class="float-left_bs" style="margin-top:50px; width:600px;"&gt;
                              &lt;h2&gt;HEIGHT 100% works in Chrome and Firefox,&lt;br&gt; &lt;b&gt;but not in IE!&lt;/b&gt;&lt;/h2&gt;
  
                          &lt;div id="s2Pfeil1" style="padding-top:-50px;padding-left:305px;"&gt; &lt;a href="#second_bs" title="Next Section"&gt;&lt;img src="images/icon_down_normal.png" alt="Next" /&gt;&lt;/a&gt;
  
                          &lt;/div&gt;
                          &lt;!--/box-links--&gt;
                      &lt;/div&gt;
                      &lt;!--/float-left_bs--&gt;
                  &lt;/div&gt;
                  &lt;!--.story--&gt;
              &lt;/div&gt;
              &lt;!--#intro--&gt;
              &lt;div id="second_bs"&gt;
                  &lt;div class="story_bsc"&gt;
                      &lt;div class="bg1_2_bs"&gt;&lt;/div&gt;
                      &lt;div class="bg2_2_bs"&gt;&lt;/div&gt;
                      &lt;div class="bg3_2_bs"&gt;&lt;/div&gt;
                      &lt;div class="float-right_bs" style="margin-top:120px; width:500px;"&gt;
                              &lt;h2&gt;HEIGHT 100% works in Chrome and Firefox,&lt;br&gt; &lt;b&gt;but not in IE!&lt;/b&gt;&lt;/h2&gt;
  
                          &lt;div id="s2Pfeil2" style="padding-top:80px;padding-left:305px;"&gt;&lt;a href="#intro_bs" title="Next Section"&gt;&lt;img src="images/icon_up_normal.png" alt="Next" /&gt;&lt;/a&gt;&amp;nbsp;&amp;nbsp;&lt;a href="#third_bs" title="Next Section"&gt;&lt;img src="images/icon_down_normal.png" alt="Next" /&gt;&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!--.story--&gt;
              &lt;/div&gt;
              &lt;!--#second--&gt;
              &lt;div id="third_bs"&gt;
                  &lt;div class="story_bsc"&gt;
                      &lt;div class="bg1_3_bs"&gt;&lt;/div&gt;
                      &lt;div class="bg2_3_bs"&gt;&lt;/div&gt;
                      &lt;div class="bg3_3_bs"&gt;&lt;/div&gt;
                      &lt;div class="float-right_bs" style="margin-top:120px; width:500px;"&gt;
                              &lt;h2&gt;HEIGHT 100% works in Chrome and Firefox,&lt;br&gt; &lt;b&gt;but not in IE!&lt;/b&gt;&lt;/h2&gt;
  
                          &lt;div id="s2Pfeil3" style="padding-top:100px;padding-left:225px;"&gt;   &lt;a href="#second_bs" title="Next Section"&gt;&lt;img src="images/icon_up_normal.png" alt="Next" /&gt;&lt;/a&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!--.story--&gt;
              &lt;/div&gt;
              &lt;!--#third--&gt;
          &lt;/div&gt;
          &lt;!--/section-2--&gt;
      &lt;/div&gt;
      &lt;!--/wrapper--&gt;
      &lt;div class="suche"&gt;
          &lt;form class="search" action="" method="post"&gt;
              &lt;label for="search-box"&gt;Search:&lt;/label&gt;
              &lt;input id="search-box" type="text" name="search" onclick="search_bigger();" onblur="search_smaller();"&gt;
          &lt;/form&gt; &lt;a href="http://www.facebook.com/BrandortMarketingKommunikationsGmbh" title="Werde Fan von Brandort. auf Facebook" alt="Werde Fan von Brandort. auf Facebook" target="_blank"&gt;&lt;div class="herz"&gt;&lt;/div&gt;&lt;/a&gt;&lt;a href="images/icon_quicklinks_phone_hover_big.png" rel="lightbox" title="So erreichen Sie uns" alt="So erreichen Sie uns"&gt;&lt;div class="telefon"&gt;&lt;/div&gt;&lt;/a&gt;
  
      &lt;/div&gt;
      &lt;div class="css-panes"&gt;
          &lt;div style="display: block;"&gt;&lt;/div&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;div&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS File : </p>
  
  <pre><code>html{
      height:100%;
  }
  
  body{
      font-family: 'universal_light';
      margin: 0;
      min-width: 980px;
      padding: 0;
      line-height:2em;
      background-color: #f6aa27;
      height: 100%;
  
  }
  
  p{
      margin: 0 0 20px 0; 
  }
  
  p, ul{
      font-family:'universal_light';
      font-weight:normal;
      font-size:16px;
  }
  
  img{
      border: 0;
  }
  
  h1, #pixels{
      font-family:"Museo 900", Verdana, serif;
      font-size-adjust:0.40;
      font-weight:700;
      font-style:normal;
  }
  
  h2{
      font-family: 'universal_black';
      color:#000000;
      font-size:30px;
      font-weight:normal;
  }
  
  #wrapper{
      height: 100%;
  }
  
  #header h1, #pixels{
      color: #48941A;
  }
  
  
  
  #nav{
      list-style: none;
      position: fixed;
      right: 20px;
  }
  
  #nav li{
      margin: 0 0 15px 0; 
  }
  
  #nav_bs{
      list-style: none;
      position: fixed;
      right: 20px;
  }
  
  #nav_bs li{
      margin: 0 0 15px 0; 
  }
  
  #nav_bsa{
      list-style: none;
      position: fixed;
      right: 20px;
  }
  
  #nav_bsa li{
      margin: 0 0 15px 0; 
  }
  
  #header, #intro, #second{
      width: 100%;
  }
  
  
  
  /*hier wurde "fix" nach der "no-repeat" gelöscht*/
  #intro{
      background-color:#f6aa27;
      margin: 0 auto;
      padding: 0;
      height: 1200px;
      width:100%;
      border-style:solid;
      border-width:5px;
  
  }
  
  
  
  /*hier wurde "fix" nach der "no-repeat" gelöscht*/
  #intro .bg1{
  
      width: 900px;
      position: absolute;
      height: 900px;
      margin: 0 auto;
      padding: 0;
      margin-top: -26px;
      margin-left: 66px;
  
  }
  /*hier wurde "fix" nach der "no-repeat" gelöscht*/
  #intro .bg2{
  
      width: 900px;
      position: absolute;
      height: 900px;
      margin: 0 auto;
      padding: 0;
  
  }
  #intro .bg3{
      background: url(images/kohle.png) 50% 0 no-repeat fixed;
      width: 1000px;
      position: absolute;
      height: 900px;
      margin: 0 auto;
      padding: 0;
  
  }
  
  #second{
      background:url(images/bg1.jpg) 50% 0 no-repeat;
      background-color:#f6aa27;
      color: #D3D3D3;
      height: 100%;
      min-height: 100%;
      margin: 0 auto;
      padding: 0;
      overflow: hidden;
      border-style:solid;
      border-width:5px;
  }
  
  #section-2{
  background-color:#D3D3D3;
  }
  
  #second .bg1_2{
      background:url(images/second/feurig.png) 50% 0 no-repeat;
      width: 900px;
      position: absolute;
      height: 900px;
      margin: 0 auto;
      padding: 0;
      margin-left: 143px;
      margin-top: -10px;
  
  }
  
  #second .bg2_2{
      background:url(images/second/handschrift.png) 50% 0 no-repeat;
      width: 900px;
      position: absolute;
      height: 900px;
      margin: 0 auto;
      padding: 0;
  
  }
  
  #second .bg3_2{
      background:url(images/second/brandeisen.png) 50% 0 no-repeat fixed;
      width: 900px;
      position: absolute;
      height: 100%;
      margin: 0 auto;
      padding: 0;
  
  }
  
  
  #third{
      background:url(images/bg1.jpg) 50% 0 no-repeat;
      background-color:#f6aa27;
      color: #000000;
      height: 100%;
      min-height: 100%;
      margin: 0 auto;
      padding: 0;
      overflow: hidden;
          border-style:solid;
      border-width:5px;
  }
  
  #third .bg1_3{
      background:url(images/third/handschrift.png) 50% 0 no-repeat;
      width: 900px;
      position: absolute;
      height: 900px;
      margin: 0 auto;
      padding: 0;
  
  }
  #third .bg2_3{
      background:url(images/third/feurig.png) 50% 0 no-repeat;
      width: 900px;
      position: absolute;
      height: 900px;
      margin: 0 auto;
      padding: 0;
  }
  
  #third .bg3_3{
      background:url(images/third/seil.png) 50% 0 no-repeat fixed;
      width: 900px;
      position: absolute;
      height: 900px;
      margin: 0 auto;
      padding: 0;
  }
  
  #fifth{
      background: #ccc;
      height: 400px;
      margin: 0 auto;
      padding: 40px 0 0 0;
  }
  
  
  
  #header, #intro_bs, #second_bs{
      width: 100%;
  }
  
  #intro_bs{
      background:url(images/bg2.jpg) 50% 0 no-repeat;
      background-color:#c9cacc;
      color: #000000;
      height: 900px;
      margin: 0 auto;
      padding: 0;
          border-style:solid;
      border-width:5px;
  
  }
  
  #intro_bs .bg1_bs{
      background:url(images/intro_bs/mitarbeiter.png) 50% 0 no-repeat;
      width: 900px;
      position: absolute;
      height: 900px;
      margin: 0 auto;
      padding: 0;
  
  }
  
  #intro_bs .bg2_bs{
      background:url(images/intro_bs/feurig.png) 50% 0 no-repeat;
      width: 900px;
      position: absolute;
      height: 900px;
      margin: 0 auto;
      padding: 0;
  
  }
  #intro_bs .bg3_bs{
      background:url(images/intro_bs/handschrift.png) 50% 0 no-repeat;
      width: 900px;
      position: absolute;
      height: 900px;
      margin: 0 auto;
      padding: 0;
  }
  
  #second_bs{
      background:url(images/bg2.jpg) 50% 0 no-repeat;
      background-color:#c9cacc;
      color: #000000;
      height: 950px;
      margin: 0 auto;
      padding: 0;
      overflow: hidden;
          border-style:solid;
      border-width:5px;
  }
  
  #second_bs .bg1_2_bs{
      background:url(images/second_bs/feurig.png) 50% 0 no-repeat;
      width: 900px;
      position: absolute;
      height: 900px;
      margin: 0 auto;
      padding: 0;
  
  }
  
  #second_bs .bg2_2_bs{
      background:url(images/second_bs/handschrift.png) 50% 0 no-repeat;
      width: 900px;
      position: absolute;
      height: 900px;
      margin: 0 auto;
      padding: 0;
  
  }
  
  #second_bs .bg3_2_bs{
      background:url(images/second_bs/steffen.png) 50% 0 no-repeat;
      width: 900px;
      position: absolute;
      height: 950px;
      margin: 0 auto;
      padding: 0;
      margin-left: -121px;
  
  
  }
  
  
  #third_bs{
      background:url(images/bg2.jpg) 50% 0 no-repeat;
      background-color:#c9cacc;
      color: #000000;
      height: 950px;
      margin: 0 auto;
      padding: 0;
      overflow: hidden;
          border-style:solid;
      border-width:5px;
  }
  
  #third_bs .bg1_3_bs{
      background:url(images/third_bs/feurig.png) 50% 0 no-repeat;
      width: 900px;
      position: absolute;
      height: 900px;
      margin: 0 auto;
      padding: 0;
  
  }
  #third_bs .bg2_3_bs{
      background:url(images/third_bs/handschrift.png) 50% 0 no-repeat;
      width: 900px;
      position: absolute;
      height: 900px;
      margin: 0 auto;
      padding: 0;
  
  }
  #third_bs .bg3_3_bs{
      background:url(images/third_bs/mike.png) 50% 0 no-repeat;
      width: 900px;
      position: absolute;
      height: 950px;
      margin: 0 auto;
      padding: 0;
      margin-left: -121px;
      margin-top: -287px;
  }
  
  
  
  
  .story{
      margin: 0 auto;
      min-width: 980px;
      overflow: auto;
      width: 980px;
  
  }
  
  .story .float-left, .story .float-right{
      padding: 100px 0 0 0;
      position: relative;
      width: 350px;   
  }
  
  
  .linkp1 a {
      background:url('images/brandort_norm.gif') 0 0 no-repeat fixed;
      /*height: 12px;
      width: 95px;*/
      display: block;
      z-index:11111;
  }
  
  .linkp1 a:hover {
      background:url('images/brandort_hover.gif') 0 0 no-repeat fixed;
  }
  
  
  .linkp2 a {
      background:url('images/brandstifter_norm.gif') no-repeat fixed;
      /*height: 12px;
      width: 95px;*/
      display: block;
      z-index:11111;
  }
  
  .linkp2 a:hover {
      background:url('images/brandstifter_hover.gif') no-repeat fixed;
  }
  
  .linkp3 a {
      background:url('images/brandsaetze_norm.gif') no-repeat fixed;
      /*height: 12px;
      width: 95px;*/
      display: block;
      z-index:11111;
  }
  
  .linkp3 a:hover {
      background:url('images/brandsaetze_hover.gif') no-repeat fixed;
  }
  
  .linkp4 a {
      background:url('images/brandschaetze_norm.gif') no-repeat fixed;
      /*height: 12px;
      width: 95px;*/
      display: block;
      z-index:11111;
  }
  
  .linkp4 a:hover {
      background:url('images/brandschaetze_hover.gif') no-repeat fixed;
  }
  
  .linkp5 a {
      background:url('images/brandpunkt_norm.gif') no-repeat fixed;
      /*height: 12px;
      width: 95px;*/
      display: block;
      z-index:11111;
  }
  
  .linkp5 a:hover {
      background:url('images/brandpunkt_hover.gif') no-repeat fixed;
  }
  
  
  
  
  #menu_neu {
  height: 40px;
  width: 1200px;
  text-align: center;
  line-height:1em!important;
  position: fixed;
  left: 40%;
  width: 640px;
  z-index: 10000;
  }
  
  ul#topNav{
      margin-top:51px;
      margin-left: -218px;
      color:#000000;
  }
  
  ul#topNav li {
      list-style: none;
      display: inline;
      margin: 0; padding: 0;
      margin-top: 50%;
  }
  
  ul#topNav a, ul#topNav span {
      float: left;
      margin-right: 0.4em;
      margin-left: 0.1em;
      padding: 0.2em 1em;
      text-decoration: none;
      color:#000000;
      font-size:14px;
  }
  
  * html ul#topNav a, * html ul#topNav span {  /* Korrektur fuer IE 5.x */
      width: 8em;
      wi\dth: 6em;
  }
  
  ul#topNav a:hover, ul#topNav span {
      color:#000000;
      font-size:14px;
  }
  
  ul#topNav a:active {
      color:#000000;
      font-size:14px;
  }
  
  ul#topNav div {
       clear: left;
  }
  
  #topNav .current a {
      color:#F45D32;
  }
  </code></pre>
  
  <p>Demo : <a href="http://ealtinel.com/height/">http://ealtinel.com/height/</a></p>
  
  <p>How can I get it to work in IE?</p>