带有下载按钮的电子邮件中的粘性页脚

Question

几天前，我收到了来自 LinkedIn 的 e-mail，其中提供了一个新的 LinkedIn 应用程序（LinkedIn Job Search）。我对粘在屏幕底部的页脚栏感到惊讶。

我很好奇如何构建它！ Google 没有进一步帮助我，我之前没有看到它。谁能进一步帮助我？

Answer 1

我发现最好的方法是使用 flexbox：

body
    height: 100%
    display: flex
    flex-direction: column

.container
    flex: 1

.footer
    position: relative
    bottom: 0px
    height: 50px
    flex-shrink: 0

这是一个代码笔：https://codepen.io/RPAraujo/pen/GqPyBp/

它在现代浏览器中工作，不确定它在电子邮件应用程序中如何工作

Answer 2

您可以使用 position: fixed; 和许多支持媒体查询的移动客户端来实现这一点。 position: fixed; 变得更多 problematic on desktop and web clients，但如果我们将行为包装在媒体查询中，它会很好地工作：

CSS

@media only screen and (max-width: 768px) {
    .fixed {
        position: fixed;
        bottom:0;
        left: 0;
        right: 0;
    }
}

HTML

<div class="fixed">
    <A href="#">LinkedIn Ad</a>
</div>

注意：这不适用于不支持媒体查询的移动客户端（如 Gmail）。

带有下载按钮的电子邮件中的粘性页脚

Sticky footer in an email with a download button

html

css

linkedin

html-email