Question

我有以下CSS布局： enter image description here

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

它看起来像这样：

enter image description here

我的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 并使用position: relative和position: absolute

在中间行包装2个div

.tablewrap-wrap具有相对位置，并且在IE＆lt; 11中以某种方式不能以100％的高度工作。

如何在IE9 / IE10上完成这项工作

Answer 1

您可能无法单独使用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
            }
          }
        }
      }
    }
  }
}

Answer 2

你可以仅使用CSS， Here's我前一段时间做过类似的演示.. 你的版本会稍微小一些..

<强> HTML

<div class="Container">
    <div class="Header">
         <h1>Header</h1>

        <p>if The Header height is not fixed, It will span excatly his needed space.</p>
    </div>
    <div class="HeightTaker">
        <div class="Wrapper Container Inverse">
            <div>
                <div class="Footer">
                    <p>The footer behave just like the header</p>
                </div>
            </div>
            <div class="HeightTaker">
                <div class="Wrapper">
                    <div class="LeftMenu">
                         <h1>Left Menu</h1>

                        <p>If my width is not fixed</p>
                        <p>I will take excatly what I need</p>
                    </div>
                    <div class="Content">
                         <h1>Content</h1>

                        <p>The Content div should always span the available Container space.</p>
                        <p>If the content exceed the Content available space, it will scroll.</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <p>Long</p>
                        <!--<p><a target="_blank" href="http://jsfiddle.net/avrahamcool/MN4uE/">Here's a demo of this scenario</a></p>-->
                        <p class="Important">This Layout has been tested on: IE10, FireFox, Chrome, Safari, Opera. using Pure CSS only</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<强> CSS

* {
    margin: 0;
    padding: 0;
}
html, body, .Container {
    height: 100%;
}
.Container:before {
    content:'';
    height: 100%;
    float: left;
}
.HeightTaker {
    position: relative;
    z-index: 1;
}
.HeightTaker:after {
    content:'';
    clear: both;
    display: block;
}
.Wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
}
.Inverse, .Inverse > * {
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
.LeftMenu {
    height: 100%;
    float: left;
}
.Content {
    overflow: auto;
    height: 100%;
}
/*For demonstration only*/
 p {
    font-size: 1.3em;
}
.Important {
    font-weight: bolder;
    color: white;
}
body > .Container {
    text-align: center;
}
.Header {
    background-color: #bf5b5b;
}
.LeftMenu {
    background-color: #bdbe4c;
}
.Content {
    background-color: #90adc1;
}
.Footer {
    background-color: #b5a8b7;
}

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

2 个答案:

CSS：

JS：