如何使用 CSS 制作粘性页脚?

Posted

技术标签:

【中文标题】如何使用 CSS 制作粘性页脚?【英文标题】:How to make a sticky footer using CSS? 【发布时间】:2015-05-18 03:14:08 【问题描述】:

我想将页脚保留在页面底部。我试试这个

position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;

但我的页脚变得凌乱。我的网站是用 WordPress 制作的。如果可能的话,我不想为此使用任何插件。而且我只想使用纯 CSS。

这里是 CSS 脚本

footer #bottom-footer
background: none repeat scroll 0 0 #FFFFFF;
color: #000000;
border-top: 5px solid #F80000;
text-align: left;
padding: 9px;
font-size: 13px;

.footer-wrap a
color:#000000;

.footer-wrap a:hover
color:#F80000;

.footer-logo a 
margin-bottom: 6px;
display: block;

.footer-socials 
float: left;
line-height: 0px;

.footer-socials a 
border-radius: 100%;
color: #ffffff;
display: inline-block;
font-size: 14px;
height: 30px;
line-height: 30px;
margin-left: 3px;
text-align: center;
vertical-align: middle;
width: 30px;

.footer-socials a.facebook 
background: none repeat scroll 0 0 #1f69b3;

.footer-socials a.twitter 
background: none repeat scroll 0 0 #43b3e5;

.footer-socials a.gplus 
background: none repeat scroll 0 0 #d84734;

.footer-socials a.youtube 
background: none repeat scroll 0 0 #df2126;

.ak-contact-address .socials a.pinterest 
background: none repeat scroll 0 0 #ff3635;

.footer-socials a.linkedin 
background: none repeat scroll 0 0 #1a7696;

.footer-socials .socials a.flickr 
background: none repeat scroll 0 0 #e1e2dd;

.footer-socials .socials a.vimeo 
background: none repeat scroll 0 0 #7fdde8;

.footer-socials .socials a.instagram 
background: none repeat scroll 0 0 #c8c5b3;

.footer-socials .socials a.tumblr 
background: #395976;

.footer-socials .socials a.rss 
background: none repeat scroll 0 0 #fbc95d;

.footer-socials .socials a.github 
background: none repeat scroll 0 0 #383838;

.footer-socials .socials a.stumbleupon 
background: none repeat scroll 0 0 #e94c29;

.footer-socials .socials a.skype 
background: none repeat scroll 0 0 #09c6ff;

.footer-socials .social-icons span 
cursor: pointer;
display: inline-block;

.footer-socials .socials i 
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

.tagcloud a
font-size: 13px !important;
background: rgba(0,0,0,0.4);
padding: 8px 10px;
margin: 0 2px 4px 0;
display: inline-block; 
line-height: 1;

.sidebar .tagcloud a
background: #23A38F;
color: #FFF;

Website link

【问题讨论】:

【参考方案1】:

遵循从不再可用的在线资源(死链接)实现的干净方法,您的页面所需的最少代码将是(注意 - 最好使用 #bottom-footer 而不是 footer #bottom-footer 来选择您的页脚 - 这可能是问题的一部分):

html 
    position: relative;
    min-height: 100%;

body 
    margin: 0 0 100px; /* bottom = footer height */

#bottom-footer 
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;

【讨论】:

链接已失效。【参考方案2】:

使用 flex box CSS 和以下 HTML 结构的几个现代方法:

<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>

方法一:(固定高度页脚)将display:flexflex-direction:column 应用到body。将flex:1 (flex-grow:1) 应用于main 元素。

主元素将垂直增长以占据任何空白空间,从而使页脚粘在底部。

body 
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin:0;


header 
  background-color: #cffac7;
  height:50px;


main 
  background-color: #f8e2ff;
  flex:1;


footer 
  background-color: #fceec7;
  height:50px;
<header></header>
<main></main>
<footer></footer>

方法2:(固定高度页脚)将display:flexflex-direction:column 应用到body。申请margin-top:autofooter

你已经完成了,因为auto margins inside flex containers absorb all available free space,使页脚粘在底部。请注意,这不依赖于 main 具有任何高度或内容。在这种情况下,我们根本没有给 main 任何 flex 规则,所以它的默认值是 flex:initial (flex: 0 1 auto)。

body 
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      margin:0;
    

    header 
      background-color: #cffac7;
      height:50px;
    

    main 
      background-color: #f8e2ff;
    

    footer 
      background-color: #fceec7;
      height:50px;
      margin-top:auto;
    
<header></header>
<main></main>
<footer></footer>

方法 3:(流体高度页脚)这实际上与 #1 中的技术相同,但元素没有固有高度。凭借赋予竞争元素的(无单位的)flex-grow 值之间的比率,main 的增长速度将是headerfooter 的五倍。

body 
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin:0;


header 
  background-color: #cffac7;
  flex:1;


main 
  background-color: #f8e2ff;
  flex:5;


footer 
  background-color: #fceec7;
  flex:1 
<header></header>
<main></main>
<footer></footer>

【讨论】:

【参考方案3】:

这很完美。这是 W3SCHOOLS 的例子

https://www.w3schools.com/howto/howto_css_fixed_footer.asp

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer 
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;

</style>
</head>
<body>

<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>

<div class="footer">
  <p>Footer</p>
</div>

</body>
</html> 

【讨论】:

链接失效,404 更新链接:w3schools.com/howto/howto_css_fixed_footer.asp【参考方案4】:

Bootstrap 有一个可以使用的粘性页脚。

http://getbootstrap.com/examples/sticky-footer/

或者你可以用 CSS 和 jQuery 来做:

https://css-tricks.com/snippets/css/sticky-footer/

希望对您有所帮助。

【讨论】:

我尝试了 css-tricks 中的粘性页脚,但页脚仍然没有粘性【参考方案5】:

使用 CSS Grid 的 2019 年解决方案

如果你在这里,那么你可能像我一样遭受了太久的痛苦:)

这是一个起作用的解决方案。这是我在这里用于我的网站的内容:

https://aleksandrhovhannisyan.github.io/

无论页面上有多少内容,您都可以通过导航到我的站点域下的虚假 URL 来验证它是否有效:

我会保持非常通用和可重用的东西。下面是您需要的所有代码,其中包含一个基本 DOM,其中包括一个固定顶部导航/导航栏、一个主要内容区域和一个粘性页脚。

我建议您以全页模式运行并查看它以验证它是否有效:

body 
    display: grid;
    /* Replace 80 with your footer height, or with auto for variable-height footers */
    grid-template-rows: 1fr 80px;
    /* These two are important */
    min-height: 100vh;
    position: relative;


#topnav 
  background-color: black;
  color: white;
  /* Recommended by Google, but adjust as you see fit */
  min-height: 64px;
  position: fixed;
  right: 100%;
  top: 0;
  width: 100%;
  /* This is to ensure that it always appears above everything. */
  z-index: 100;
  left: 0;


#page-content 
    grid-row: 1;
    /* https://css-tricks.com/preventing-a-grid-blowout/ */
    min-width: 0;
    /* change as you see fit */
    padding-bottom: 64px;
    padding-top: 64px;


#page-footer 
    background: black;
    bottom: 0;
    color: white;
    display: flex;
    grid-row: 2;
    height: 80px;
    position: absolute;
    width: 100%;
<body>
    <header>
        <nav id="topnav">topnav stuff goes in here</nav>
    </header>
    <main id="page-content">
        <h1>Page content goes here</h1>
    </main>
    <footer id="page-footer" class="container">
        <div>Made by Name</div>
    </footer>
</body>

【讨论】:

【参考方案6】:

我在这里找到了答案

Modern Clean CSS “Sticky Footer”

html 
position: relative;
min-height: 100%;

body 
margin: 0 0 100px; /* bottom = footer height */

footer 
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;

【讨论】:

以上是关于如何使用 CSS 制作粘性页脚?的主要内容,如果未能解决你的问题,请参考以下文章

UICollectionViewController:无论 CollectionView 的大小如何,都制作粘性页脚

如何在反应中制作粘性页脚?

粘性页脚引导程序 4 [重复]

如何让粘性页脚工作?

粘性页脚问题 - CSS

Css 粘性页脚 - 响应式