如何使此CSS布局在IE9 / 10中工作？

nathnolt 发表于 Dev

萘乙酸

我有以下CSS布局：在此处输入图片说明

它在Firefox / Chrome和IE11中运行良好。但是它不适用于任何低于11的IE。

看起来像这样：

在此处输入图片说明

我的HTML：

<div class="wrap">
    <div class="table"> <!-- display: table -->
        <div class="top"><!-- display: table-row -->
        content
        </div>
        <div class="content"> <!-- display: table-row -->
          <div class="tablewrap-wrap"> <!--
               position: relative;
               width: 100%;
               height: 100% (this doesn't work in IE<11)
                -->
            <div class="tablewrap"><!-- 
              absolute 100% 100% -->
              <table>
                <tr>
                  <td>content</td>
                </tr>
              </table>
            </div>
          </div>
       </div>
       <div class="bottom"> <!-- display: table-row -->
       content
       </div>
  </div>
</div>

小提琴：http : //jsfiddle.net/nb538jbg/

布局适用于display:table和中间行中的2个环绕divposition: relative和position: absolute

.tablewrap-wrap 具有相对位置，并且在IE <11中不能以100％的高度工作。

如何在IE9 / IE10上进行这项工作

萘乙酸

您可能无法仅使用CSS（对于IE9 / IE10）做到这一点，所以我自己用JavaScript编写了一个修复程序。

CSS：

.dtable{
  display:table;
  height:100%;
  width:100%;
}

.dtable-row{
  display:table-row;
}
.dtable-row.fill{
  height:100%;
}

.dtable-cell{
  display:table-cell;
  vertical-align:top;
  height:100%;
}
.dtable-cell.fill{
  width:100%;
}

.relative-fill{
  position:relative;
  width:100%;
  height:100%;
}

.absolute-fill{
  position:absolute;
  height:100%;
  width:100%;
  overflow:auto;
}

JS：

// fix table based layout for IE9 / IE10 with class=
// dtable, dtable-row, dtable-cell, absolute-fill, relative-fil
var table_layout = {
  // set support to 0 and fix height when doesn't extend to parent height
  setSupport0fixHeight: function(obj){
    for(var i=0, len=obj.elements.length; i<len; i++){
      var elem = $( obj.elements[i] );
      if( elem.height() < elem.parent().height() ){
        obj.support = 0;
        break;
      }
    }
  },

  // dtable fill object
  tableFill: { elements:[], support:1 },
  // relative fill object
  relativeFill: { elements:[], support:1 },


  // load this function when you want to initialise the object
  // You can use this function with a element array to exclude those elements
  // from the elements array that gets fixed
  init: function(){
    if(arguments.length > 0){
      this.update(arguments[0]);
    } else {
      this.update();
    }
    this.setSupport0fixHeight(this.relativeFill);
    this.setSupport0fixHeight(this.tableFill);
    this.fixTableBasedLayoutHeight();
  },

  // this updates the elements which need to be fixed
  // hass support for exclode elements array
  update: function(){
    this.tableFill.elements = $(".dtable");
    this.relativeFill.elements = $(".relative-fill");

    if(arguments.length > 0){ // exclude elements
      this.tableFill.elements = $( $(this.tableFill.elements).not(arguments[0]).get() );
      this.relativeFill.elements = $( $(this.relativeFill.elements).not(arguments[0]).get() );
    }

  },

  // you first need to hide all elements to avoid some bug
  fixTableBasedLayoutHeight: function(){
    var fixHeightShow = function(obj){
      // loop throught elements of obj, set height to parent hide and show elem
      for(var i=0, len = obj.elements.length; i < len; i++){
        var elem = $(obj.elements[i]);
        elem.height(elem.parent().height());
        elem.show();
      }
    }

    // first hide all elements
    if(!this.tableFill.support){ this.tableFill.elements.hide() }
    if(!this.relativeFill.support){ this.relativeFill.elements.hide() }

    // fix height and show elements
    if(!this.tableFill.support){ fixHeightShow(this.tableFill) }
    if(!this.relativeFill.support){ fixHeightShow(this.relativeFill) }
  },

  // duplicates height of all
  // sub elements with class dtable / relative-fill in sourceElem to 
  // all elements in destElemArr
  // expects 2 jQuery object arrays.
  duplicateStyle:function(sourceElem, destElemArr){
    // element itself
    // check is element itself dtable or relative-fill in classlist sourceElem[0]
    // set height to sourceElem height
    if(this.tableFill.support == 0){
      if(sourceElem[0].className.match(/dtable|relative-fill/)){
        destElemArr.height(sourceElem.height());
      }

      // search for class relative-fill in source elem
      var classArr = [".dtable", ".relative-fill"];

      for(var classname = 0; classname<classArr.length; classname++){
        var sourceClassElemArr = sourceElem.find(classArr[classname]);
        if(sourceClassElemArr.length > 0){ // relative fill found
          for(var i=0, len=destElemArr.length; i<len; i++){ // loop through all source elem children
            var destClassElemArr = $(destElemArr[i]).find(classArr[classname]); // get relative fill array from dest array
            for(var j=0, len2=destClassElemArr.length; j<len2; j++){ // loop through all relative fill dest array
              var sourceElem2 = $(sourceClassElemArr[j]);
              var destElem2 = $(destClassElemArr[j]);

              destElem2.height( sourceElem2.height() ); // set relative fill height from dest to source height
            }
          }
        }
      }
    }
  }
}