如何在带有 table 单元格的 div 中获得粘性页脚？

Question

我已经构建了一个简单的 2 列布局，如下例所示，现在我想在布局的右列中添加一个粘性页脚。

<div class="table">
    <div class="cell">
        <!-- some other stuff -->
    </div>
    <div class="cell">
        <header class="row">Header</header>
        <main class="row expanded">Main</main>
        <footer class="row">Footer</footer>
    </div>
</div>

Class 定义：

.table {
   display: table;
   height:100%;
   table-layout: fixed;
   border-collapse: collapse;
}

.cell {
    border: 2px solid black;
    vertical-align: top;
    display: table-cell;
    height:100%;
}

.row {
    display: table-row;
}

.expanded {
    height: 100%;
}

参见fiddle：https://jsfiddle.net/k1zjjwze/

如您所见，我使用了 display: table-cell 来获得全高 2 列布局（我知道我也可以为此使用 flexbox - 但现在还不行）。现在我想要在布局的右栏内有一个粘性页脚，所以我将页眉、主容器和页脚容器设置为显示：table-row 并将主容器扩展到高度：100%，但这不是工作，有人能告诉我如何实现我想要的吗？

Answer 1

我能够通过给第二个单元格一个相对定位来完成这个。完成后，您可以给页脚单元格一个绝对定位，并将其底部设置为 0px。

免责声明：我几乎肯定有更好的方法来做到这一点。

HTML 第二个单元格

<div class="cell rel">
    <header class="row">Header</header>
    <main class="row expanded">Main</main>
    <footer class="row">Footer</footer>
</div>

CSS

.rel{position:relative;}

footer {
  border: 1px solid yellow;
  position:absolute;
  bottom:0px;
}

https://jsfiddle.net/k1zjjwze/2/

Answer 2

该死的，我找到了解决方案，我只需要在第二列中添加另一个 table 包装器即可：

<div class="table">
    <div class="cell">
        <!-- some other stuff -->
    </div>
    <div class="cell">
       <div class="table">
           <header class="row">Header</header>
           <main class="row expanded">Main</main>
           <footer class="row">Footer</footer>
       </div>
    </div>
</div>

查看更新 fiddle：https://jsfiddle.net/k1zjjwze/1/

如何在带有 table 单元格的 div 中获得粘性页脚？

How can I get a sticky footer inside a div with table cell?

html

css

sticky-footer