时间戳

首页 > 解决方案 > Sticky footer with background image

html - Sticky footer with background image

问题描述

I have a footer in the body which is supposed to be tacked onto the bottom of the page (not fixed and always on the page). I think this is a called a sticky footer. It seems to only occur on pages where the content on the page does not span very far vertically. However on some pages there is a gap of whitespace below the footer like so:

screenshot

I have made the background orange so you can see where the footer is on this page.

On another page, it looks like this (correctly:

screenshot 2

I'm wondering how I could fix this, or if there would be a better way to design the footer - I did not write it originally.

Here is the html which is within a body element:

<footer class="main-footer">
        <div class="container">
            <ul class="links">
                <li><a href="link1">stuff1</a></li>
                <li><a href="link2">stuff2</a></li>
                <li><a href="link3">stuff3</a></li>
                <li><a href="link4">stuff4</a></li>
            </ul>
        </div>
    </footer>

Note that the body is rendered with @RenderBody() with the footer following after.

and here is the CSS:

.main-footer {

    background-image: url("images/footer-background.png");
    background-size: cover;
    background-position: initial;
    background-repeat: no-repeat;
    background-color: #ffffff;
    z-index: 10;
    padding-top: 2%;
    left: 0;
    color: #fff;
    text-align: right;
    height:190px;
    bottom:0;
}


  .main-footer .links {
    padding: 0;
      margin-top: 100px;
    list-style: none; }
    .main-footer .links li {
      display: inline-block; }
      @media only screen and (max-width: 768px) {
        .main-footer .links li {
          display: block;
          margin-bottom: 5px; } }
      .main-footer .links li:not(:last-child) {
        margin-right: 15px; }
  .main-footer a {
    color: inherit;
    font-weight: 200; }
  .main-footer.logged-in {
    position: static;
    background: #fff;
    padding: 30px 0;
    border-top: 1px solid #D8D8D8; }
    @media only screen and (max-width: 1040px) {
      .main-footer.logged-in {
        margin-top: 0; } }
    .main-footer.logged-in a, .main-footer.logged-in * {
      color: #999999; }
  .main-footer.logged-out {
    position: static;
    background: #fff;
    padding: 30px 0;
    border-top: 1px solid #D8D8D8; }
    @media only screen and (max-width: 1040px) {
      .main-footer.logged-out {
        margin-top: 0; } }
    .main-footer.logged-out a, .main-footer.logged-in * {
      color: #999999; }

body.content-tall .main-footer {
  position: relative;
  bottom: auto;
  margin-top: 30px; }

I am happy to provide more information if it would help

EDIT: I have narrowed it down to the margin-top in:

  .main-footer .links {
    padding: 0;
      margin-top: 100px;

which is causing the problem. However, I cannot remove the top margin since it is necessary for formatting text vertically on the page (not shown in screenshot). I have tried overflow: auto; here which hasn't fixed it.

标签： htmlcssfooter

解决方案

.main-footer.logged-in并.main-footer.logged-out在顶部和底部有 30 像素的填充。不能肯定地说这是否与您的问题有关，肯定要找到我需要查看您的网站的罪魁祸首。

推荐阅读