TD中100％DIV高度，带自定义滚动

Question

我真的很困惑这个模板：

/* slider
/* -------------------------------------------------- */
.slider {
  position: fixed;
  z-index: 100;
  overflow: hidden;
  left: 0;
  top: 20px;
  bottom: 0;
  height: auto;
  background: #ffffff;  
}
.slider__in {
  display: table;
  width: 100%;
  height: auto !important;
  height: 100%;
  min-height: 100%;
}
.slider__row {
  display: table-row;
}
.slider__row_type_flex {
  height: 100%;
}
.slider__cell {
  display: table-cell;
  vertical-align: top;
}
.slider__row_type_flex .slider__cell {
  height: 100%;
  background: lightgreen;
}
.slider__cell-out {
  height: 100%;  
  overflow: auto;
  position: relative;
}
.slider__cell-in {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  width: auto;
}
/* chat
/* -------------------------------------------------- */
.chat {
  width: 300px;
  font: 13px / 18px Helvetica, Arial, sans-serif;
  letter-spacing: normal;
}
.chat-header {
  background: lightslategrey;
  height: 50px;  
}
.chat-body {
  height: 100%;
  background: whitesmoke;
}
.chat-footer {
  height: 150px;
  background: navajowhite;
}

<div class="slider chat" id="chat">
  <div class="slider__in">
    <div class="slider__row">
      <div class="slider__cell chat-header">
        Liquid height header with some text
      </div>
    </div>
    <div class="slider__row">
      <div class="slider__cell chat-body">
        <div class="slider__cell-out">
          <div class="slider__cell-in">
            <p>Liquid height content with custom scroll if it overfow cell height</p>
            <p>Liquid height content with custom scroll if it overfow cell height</p>
            <p>Liquid height content with custom scroll if it overfow cell height</p>
            <p>Liquid height content with custom scroll if it overfow cell height</p>
            <p>Liquid height content with custom scroll if it overfow cell height</p>
            <p>Liquid height content with custom scroll if it overfow cell height</p>
            <p>Liquid height content with custom scroll if it overfow cell height</p>
            <p>Liquid height content with custom scroll if it overfow cell height</p>
            <p>Liquid height content with custom scroll if it overfow cell height</p>
            <p>Liquid height content with custom scroll if it overfow cell height</p>
            <p>Liquid height content with custom scroll if it overfow cell height</p>
            <p>Liquid height content with custom scroll if it overfow cell height</p>
            <p>Liquid height content with custom scroll if it overfow cell height</p>
            <p>Liquid height content with custom scroll if it overfow cell height</p>
            <p>Liquid height content with custom scroll if it overfow cell height</p>
            <p>Liquid height content with custom scroll if it overfow cell height</p>
            <p>Liquid height content with custom scroll if it overfow cell height</p>
            <p>Liquid height content with custom scroll if it overfow cell height</p>
            <p>Liquid height content with custom scroll if it overfow cell height</p>
          </div>
        </div>
      </div>
    </div>
    <div class="slider__row">
      <div class="slider__cell chat-footer">
        Fixed height footer always here
      </div>
    </div>
  </div>
</div>

我需要将中心单元拉伸到100％表的所有可用空间，并在此可滚动内容中使用自定义滚动。 它工作得很好，但IE 10和更低版本使得中间行100％并推出页脚

Answer 1

您可以通过以下更改实现预期结果。 我也提供了JSFiddle链接供您参考。

MIDDLE ROW STRETCH COMPLETELY

我刚刚删除了CSS部分中的 vertical-align：top; 。

.slider__cell {
   display: table-cell;
}