CSS/JS: Height peculiarity in Chrome

Question

I have a layout that works fine in Firefox and IE, but has a glitch in Chrome.

Intended Layout:

----------------------
buttons etc., fixed height
----------------------
textarea that fills up all remaining height
----------------------
banner, fixed height
----------------------

The code below gets me just that in current Firefox and IE on windows, but in Chrome, I get this:

----------------------
buttons etc., fixed height
----------------------
textarea that fills up all remaining height
----------------------
A WEIRD BAR WITH A FEW PIXELS HEIGHT
----------------------
banner, fixed height, CUT OFF AT THE BOTTOM
----------------------

What is wrong?

I suspect there is some weird stuff going on in the height of the "notiz" div. For some reason, it is a few pixels taller than the contents.

jsfiddle: Look at it on Firefox or IE to see the intended behavior - with Chrome to see the cut-off "g" in "3g" at the bottom

Code (Sorry for so much code - I really cannot spot the problem):

HTML + JS:

 <div class="haupt" id="haupt">
         <div class="notiz" id="notiz">
         <div class="zuex" id="zuex">
         <button type="button">save</button>
         </div>
         <textarea id="igob" class="igob">Text Area</textarea></div><div class="unde" id="unde">
         bottom banner<br>1<br>2<br>3g
         </div>


     </div>
     <div>
     </div>
     <div>
     </div>
     <script>
     var addEvent, removeEvent;
      if ( window.addEventListener ) {
        addEvent = function(obj, type, fn ) {
          if (obj) obj.addEventListener(type, fn, false );
        }
        removeEvent = function(obj, type, fn ) {
        obj.removeEventListener(type, fn, false );
        }
      } else if (document.attachEvent) {
        addEvent = function(obj, type, fn ) {
          if (obj) {
            var eProp = type + fn;
            obj['e'+eProp] = fn;
            obj[eProp] = function(){obj['e'+eProp]( window.event );};
            obj.attachEvent( 'on'+type, obj[eProp] );
          }
        }
        removeEvent = function(obj, type, fn ) {
          if (obj) {
            var eProp = type + fn;
            obj.detachEvent( 'on'+type, obj[eProp] );
            obj[eProp] = null;
            obj["e"+eProp] = null;
          }
        }
      }

    function neuMole() {
      var hoechi = 600;
      if (typeof (window.innerHeight) !== 'undefined') {
        hoechi = window.innerHeight;
      } else {
        hoechi = document.documentElement.clientHeight;
      }
      var breiti = 0;
      if (typeof (window.innerWidth) !== 'undefined') {
        breiti = window.innerWidth;
      } else {
        breiti = document.documentElement.clientWidth;
      }
      setTimeout(function() {
        var igob =  document.getElementById('igob');
        if (igob) {
          var hoechiUnde = 0;
          var unde =  document.getElementById('unde');
          if (unde) {
            hoechiUnde = unde.offsetHeight;
          }
          var hoechiZuex = 0;
          var zuex =  document.getElementById('zuex');
          if (zuex) {
            hoechiZuex = zuex.offsetHeight;
          }
          igob.style.height = (hoechi - hoechiUnde - hoechiZuex) + 'px';
          igob.style.width = (breiti) + 'px';
        }
      }, 100);
    } 

     addEvent(window, 'resize', function(event) {
        neuMole();
      });
      addEvent(window, 'load', function(event) {
        neuMole();
        setTimeout(function() { window.scrollTo(0, 1) }, 100);
      });

     </script>

CSS:

     * {
        padding:0;
        margin:0;
        box-sizing:border-box;
      }
      body {
        overflow:hidden;
      }
      .haupt {
        background-color:#0f0;
      }
      .unde {
        background-color:#bbb;
      }
      .igob {
        width:600px;
        height:300px;
        border:none;
        overflow:auto;
      }
      .igob, .zuex {
        padding:5px;
      }

Answer 1

If you are looking for an easy answer then please add

display:block;

to igob class and you can see 3g clearly even in chrome..

hope it will help..