javascript - CSS/JS : Height peculiarity in Chrome

Question

我的布局在 Firefox 和 IE 中运行良好，但在 Chrome 中有问题。

预期布局:

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

下面的代码让我在当前的 Firefox 和 Windows IE 中得到了，但在 Chrome 中，我得到了这个:

----------------------
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
----------------------

怎么了？

我怀疑在“notiz”div 的高度处发生了一些奇怪的事情。由于某种原因，它比内容高几个像素。

jsfiddle : 在 Firefox 或 IE 上查看它的预期行为 - 使用 Chrome 在底部的“3g”中查看截止“g”

代码(抱歉，代码太多——我真的找不到问题):

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

如果您正在寻找一个简单的答案，请添加

display:block;

到 igob 类，即使在 chrome 中你也可以清楚地看到 3g..

希望对你有帮助