css абсолютная высота дочерней позиции в родительском элементе с отображаемой ячейкой таблицы, не работающей в IE

Быстрый вопрос о позиционировании абсолютного div в родительском отображении: table-cell в IE.

Я создал jsfiddle макета, который я пытаюсь создать, и он работает в chrome и firefox, но в IE он нарушает абсолютную высоту .list-container дочернего элемента (который предназначен для заполнения все пространство сверху вниз на 118 пикселей), когда внутри родителя с display: table-cell .

Есть ли какие-либо правила стиля IE, которые мне не хватает, чтобы помочь ему отобразить абсолютного ребенка? Возможно ли это в IE?

jsFiddle

html, body{ 
    height:100%; 
    margin:0; 
    padding:0px; 
} 
.table{ 
   display : table; 
    width : 100%; 
    height : 100%; 
} 
.row{ 
    display : table-row; 
    width : 100%; 
    height : 100%; 
} 
.table-cell{ 
    height:100%; 
    width:50%; 
    border:1px solid #000; 
    display : table-cell; 
    position: relative; 
} 
.header{ 
    position:relative; 
    top:0px; 
    height:112px;  
    margin:0px; 
    border:3px solid blue; 
    background: rgba(0,0,230, .2); 
} 
.list-container{ 
    position:absolute; 
    top:118px; 
    left:0px;
    bottom:0px; 
    right:0px;  
    margin:0px; 
    overflow:auto; 
    overflow-x:hidden; 
    border:3px solid #CCC;
    background: rgba(0,0,0,.1); 
} 

<body>
    <div class="table">
    <div class="row">
        <div class="table-cell">
            <header class="header"></header>
            <div class="list-container">
                <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            </div>
        </div>
        <div class="table-cell">
        </div>
    </div>
    </div>
</body>

css internet-explorer absolute position tablecell
person tech-e    schedule 04.12.2014    source источник
comment
Я заметил, что вычисляемый стиль в chrome и firefox для родительской ячейки div.table представляет собой полную высоту таблицы, но в IE ячейка div.table имеет высоту дочернего относительного элемента header.header.   -  person tech-e    schedule 05.12.2014

Ответы (1)


arrow_upward
2
arrow_downward

Я обнаружил, что в IE ячейка таблицы принимает высоту только от дочерних элементов. Если вы добавите оболочку div.table со стилем 100% и высотой вокруг контейнера header.header и div.list-container, это даст родительской ячейке div.table высоту 100% от родительской таблицы.

вот jsfiddle, показывающий изменения:

jsFiddle

html,
body {
  height: 100%;
  margin: 0;
  padding: 0px;
}
.table {
  display: table;
  width: 100%;
  height: 100%;
}
.row {
  display: table-row;
  width: 100%;
  height: 100%;
}
.table-cell {
  height: 100%;
  width: 50%;
  border: 1px solid #000;
  display: table-cell;
  position: relative;
  vertical-align: top;
}
.header {
  position: relative;
  top: 0px;
  height: 112px;
  margin: 0px;
  border: 3px solid blue;
  background: rgba(0, 0, 230, .2);
}
.list-container {
  position: absolute;
  top: 118px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  margin: 0px;
  overflow: auto;
  overflow-x: hidden;
  border: 3px solid #CCC;
  background: rgba(0, 0, 0, .1);
}
<body>
  <div class="table">
    <div class="row">
      <div class="table-cell">
        <header class="header"></header>
        <div class="list-container">
          <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        </div>
      </div>
      <div class="table-cell">
      </div>
    </div>
  </div>
</body>

person tech-e    schedule 04.12.2014