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

Question

提问by user3709362

I want to keep my footer at the bottom of the page. I try this

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

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

but my footer getting messy. My website is made in WordPress. If possible I don't want to use any plugin for this. And I want to use a pure CSS only.

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

Here the CSS script

这里是 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

网站链接

Answer 1

回答by Jason W

Following a clean method implemented from an online source no longer available (dead link), the minimum code you should need for your page would be (note - probably best to use #bottom-footerinstead of footer #bottom-footerfor the selection of your footer - that could be part of the issue):

遵循从不再可用的在线资源（死链接）实现的干净方法，您的页面应该需要的最低代码是（注意 - 可能最好使用#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%;
}

Answer 2

回答by Richard de Ree

This works perfect. It's the example from W3SCHOOLS

这工作完美。这是 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>

Answer 3

回答by Scott Weaver

A couple modern methods using a sprinkle of flex boxCSS and the following HTML structure:

一些使用弹性框CSS 和以下 HTML 结构的现代方法：

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

Method 1: (fixed height footer) Apply display:flexand flex-direction:columnto the body. Apply flex:1(flex-grow:1) to the mainelement.

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

The main element will grow vertically to occupy any empty space, thus making the footer stick to the bottom.

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

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>

Method 2: (fixed height footer) Apply display:flexand flex-direction:columnto the body. Apply margin-top:autothe footer.

方法 2：（固定高度的页脚）将display:flex和应用flex-direction:column到body. 应用margin-top:auto了footer。

You're done, because auto margins inside flex containers absorb all available free space, making the footer stick to the bottom. Note that this is not dependent on main having any height or content. In this case, we've given main no flex rules at all, and so it gets the default value of flex:initial(flex: 0 1 auto).

大功告成，因为弹性容器内的自动边距吸收了所有可用空间，使页脚粘在底部。请注意，这不取决于 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>

Method 3: (fluid height footer) This is really the same technique as in #1 but with elements that have no intrinsic height. By virtue of the ratio between the (unitless) flex-growvalues given to the competing elements, mainwill grow at five times the rate as the headerand footer.

方法 3：（流体高度页脚）这实际上与 #1 中的技术相同，但元素没有固有高度。凭借flex-grow给予竞争元素的（无单位）值之间的比率，main将以header和的五倍速率增长footer。

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>

Answer 4

回答by AleksandrH

Working 2019 Solution with CSS Grid

使用 CSS Grid 工作 2019 解决方案

If you're here, then you probably suffered for far too long like I did :)

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

Here's a solution that willwork. It's what I use for my site here:

这里有一个解决方案将正常工作。这是我在这里用于我的网站的内容：

https://aleksandrhovhannisyan.github.io/

You can verify that it works regardless of how much content is on a page by navigating to a fake URL under my site domain:

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

I'll keep things very generic and reusable. Below is all the code you need, with a basic DOM consisting of a fixed top navigation/navbar, a main content area, and a sticky footer.

我会保持非常通用和可重用的东西。下面是你需要的所有代码，一个基本的 DOM 由一个固定的顶部导航/导航栏、一个主要内容区域和一个粘性页脚组成。

I recommend you run and view it in full-page mode to verify that it works:

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

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>

Answer 5

回答by Laurie Williams

Bootstrap has a sticky footer you can use.

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

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

Or you can just do it with CSS and jQuery:

或者你可以使用 CSS 和 jQuery 来实现：

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

Hope that helps.

希望有帮助。

Answer 6

回答by user3709362

I found the answer here

我在这里找到了答案

Modern Clean CSS “Sticky Footer”

现代干净的 CSS “粘性页脚”

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 制作粘性页脚？

提问by user3709362

回答by Jason W

回答by Richard de Ree

回答by Scott Weaver

回答by AleksandrH

Working 2019 Solution with CSS Grid

使用 CSS Grid 工作 2019 解决方案

回答by Laurie Williams

回答by user3709362

相关推荐

最近更新

标签

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

提问by user3709362

回答by Jason W

回答by Richard de Ree

回答by Scott Weaver

回答by AleksandrH

Working 2019 Solution with CSS Grid

使用 CSS Grid 工作 2019 解决方案

回答by Laurie Williams

回答by user3709362

相关推荐

在使用 css 打印之前缩放 html 表

CSS Safari/iOS/iPhone 上的 Bootstrap 模式问题

css 中的 z-index 不起作用

CSS 如何将多个 Bootstrap 输入放在同一行上？

相关推荐

最近更新

标签