置頂頁腳

Question

幾天前我收到了來自LinkedIn它提供了一個新的LinkedIn應用程序（LinkedIn求職）的電子郵件。我驚訝於粘在屏幕底部的頁腳欄。

我很好奇如何構建這個！谷歌沒有幫助我，我以前沒有看到它。任何人都可以幫助我嗎？

Answer 1

您可以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）中工作。

Answer 2

我發現要做到這一點，最好的辦法是用使用Flexbox的：

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

.container 
    flex: 1 

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

這裏是一個codepen：https://codepen.io/RPAraujo/pen/GqPyBp/

它的工作原理在現代瀏覽器不知道它怎麼會郵件內工作應用