Question

我有一个在Firefox和IE中运行良好的布局，但在Chrome中有一个小故障。

预期布局：

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

下面的代码让我在Windows上的当前Firefox和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 ..

希望它会有所帮助..

CSS / JS：Chrome中的高度特性

1 个答案: