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>

班级定义：

.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%;
}

请参阅小提琴：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

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

<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>

请参阅更新的小提琴：https://jsfiddle.net/k1zjjwze/1/

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

2 个答案: