我真的对这个模板感到困惑:
/* 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% 并推出页脚
您可以通过以下更改实现预期结果。我也提供了JSFiddle链接供您参考。
中排完全伸展
我刚刚删除了垂直对齐:顶部;在CSS部分。
.slider__cell {
display: table-cell;
}