时间戳

首页 > 解决方案 > 我的页脚元素有问题：不会停留在页面底部

html - 我的页脚元素有问题：不会停留在页面底部

问题描述

我希望将页脚放在页面底部，但是我尝试了很多方法，但都没有奏效。

问题是：页脚位于页面标准高度的底部（无滚动），但是当页面超出该高度时；这就是问题发生的地方。代码：

<div id="div">
        <img src="http://dummyimage.com/280x200/56AD30/fff.png&text=1" />
        <img src="http://dummyimage.com/280x200/1560f0/fff.png&text=2" />
        <img src="http://dummyimage.com/280x200/C03229/fff.png&text=3" />
    </div>
    <footer class="footer">
        <div class="footer-left">
            <h3>Forever<span>Fit</span></h3>
            <div class="footer-links">
                <a class="left-links" href="#">Frakt & Leverans</a>
                <a class="left-links" href="#">Returrätt</a>
                <a class="left-links" href="#">Ångerrätt</a>
                <a class="left-links" href="#">FAQ</a>
            </div>
        </div>
        <div class="footer-center">
            <div>
                <i class="fa fa-map-marker"></i>
                <p><span>Malmö</span>Sverige</p>
            </div>
            <div>
                <i class="fa fa-phone"></i>
                <p>Ett nummer</p>
            </div>
            <div>
                <i class="fa fa-envelope"></i>
                <a href="mailto:support@company.com">Email@någonting</a>
            </div>
        </div>
        <div class="footer-right">
            <p class="footer-company-about">
                <span>Om oss</span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
            <div class="footer-icons">
                <a href="#"><i class="fa fa-facebook"></i></a>
                <a href="#"><i class="fa fa-twitter"></i></a>
                <a href="#"><i class="fa fa-instagram"></i></a>
                <a href="#"><i class="fa fa-youtube"></i></a>
            </div>
        </div>
    </footer>

CSS：

.footer {
            position: fixed;
            bottom: 0;
            left: 0;
            background-color: #292c2f;
            box-sizing: border-box;
            width: 100%;
            text-align: left;
            font: bold 16px sans-serif;
            height: 270px;
            padding: 40px 30px;
            margin-top: 50px;
        }

        .footer-left, .footer-center, .footer-right {
            display: inline-block;
            vertical-align: top;
        }

        .footer-left {
            width: 40%;
        }

        .footer h3 {
            color: #ffffff;
            font: normal 36px 'Cookie', cursive;
            margin: 0;
        }

        .footer h3 span {
            color: #5383d3;
        }

        .footer-links {
            color: #ffffff;
            margin: 20px 0 12px;
            padding: 0;
        }

                .footer-links a {
                    display: inline-block;
                    line-height: 1.8;
                    text-decoration: none;
                    color: #ffffff;
                }

             .footer-company-name {
                color: #8f9296;
                font-size: 14px;
                font-weight: normal;
                margin: 0;
            }

             .footer-center {
                width: 35%;
            }

                 .footer-center i {
                    background-color: #33383b;
                    color: #ffffff;
                    font-size: 25px;
                    width: 38px;
                    height: 38px;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 42px;
                    margin: 10px 15px;
                    vertical-align: middle;
                }

                     i.fa-envelope {
                        font-size: 17px;
                        line-height: 38px;
                    }

                 .footer-center p {
                    display: inline-block;
                    color: #ffffff;
                    vertical-align: middle;
                    margin: 0;
                }

                     .footer-center p span {
                        display: block;
                        font-weight: normal;
                        font-size: 14px;
                        line-height: 25px;
                    }

                     .footer-center a {
                        color: #5383d3;
                        text-decoration: none;
                    }
             .footer-right {
                width: 20%;
                position: absolute;
                top: 24%;
            }

             .footer-company-about {
                line-height: 20px;
                color: #92999f;
                font-size: 13px;
                font-weight: normal;
                margin: 0;
            }

                 .footer-company-about span {
                    display: block;
                    color: #ffffff;
                    font-size: 14px;
                    font-weight: bold;
                    margin-bottom: 20px;
                }

             .footer-icons {
                margin-top: 25px;
            }

                 .footer-icons a {
                    display: inline-block;
                    width: 35px;
                    height: 35px;
                    cursor: pointer;
                    background-color: #33383b;
                    border-radius: 4px;
                    font-size: 20px;
                    color: #ffffff;
                    text-align: center;
                    line-height: 35px;
                    margin-right: 3px;
                }
        .left-links {
            margin-right: 10px;
        }
        #div {
            position: absolute;
        }

        img {
            width: 200px;
            height: 2000px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 3;
            animation: slideshow 12s linear 0s infinite;
        }

            img:nth-child(2) {
                z-index: 2;
                animation-delay: 4s;
            }

            img:nth-child(3) {
                z-index: 1;
                animation-delay: 8s;
            }

        @keyframes slideshow {
            25% {
                opacity: 1;
            }

            33.33% {
                opacity: 0;
            }

            91.66% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

这是一个演示：https ://jsfiddle.net/n9kty7fh/ （请原谅幻灯片；它只是为了显示问题。）

这个问题有解决方案吗？

标签： htmlcss

解决方案

在编辑之前，我的回答对@Exiits 毫无用处，所以我删除了那部分。

现在，至于您的答案，您的代码是完美的，只有position: absolute;. position从.footerand中删除.footer-company-about并设置宽度为 100vw 以使页脚与页面的左右边缘相交。

为什么页脚不保留在幻灯片的底部？

这是因为，幻灯片具有position:absolute;使其具有比身体本身更高的高度。页脚位于幻灯片上方的正文底部，这就是您遇到问题的原因。

这也意味着，您的页脚不能（很可能）到达幻灯片的底部。

编辑：这里的代码应该正是你想要的 -

.footer {
  bottom: 0;
  left: 0;
  background-color: #292c2f;
  box-sizing: border-box;
  width: 100vw;
  text-align: left;
  font: bold 16px sans-serif;
  height: 270px;
  padding: 40px 30px;
  margin-top: 50px;
  overflow: auto;
}

.footer-left,
.footer-center,
.footer-right {
  display: inline-block;
  vertical-align: top;
}

.footer-left {
  width: 40%;
}

.footer h3 {
  color: #ffffff;
  font: normal 36px 'Cookie', cursive;
  margin: 0;
}

.footer h3 span {
  color: #5383d3;
}

.footer-links {
  color: #ffffff;
  margin: 20px 0 12px;
  padding: 0;
}

.footer-links a {
  display: inline-block;
  line-height: 1.8;
  text-decoration: none;
  color: #ffffff;
}

.footer-company-name {
  color: #8f9296;
  font-size: 14px;
  font-weight: normal;
  margin: 0;
}

.footer-center {
  width: 35%;
}

.footer-center i {
  background-color: #33383b;
  color: #ffffff;
  font-size: 25px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  text-align: center;
  line-height: 42px;
  margin: 10px 15px;
  vertical-align: middle;
}

i.fa-envelope {
  font-size: 17px;
  line-height: 38px;
}

.footer-center p {
  display: inline-block;
  color: #ffffff;
  vertical-align: middle;
  margin: 0;
}

.footer-center p span {
  display: block;
  font-weight: normal;
  font-size: 14px;
  line-height: 25px;
}

.footer-center a {
  color: #5383d3;
  text-decoration: none;
}

.footer-right {
  width: 20%;
  top: 24%;
}

.footer-company-about {
  line-height: 20px;
  color: #92999f;
  font-size: 13px;
  font-weight: normal;
  margin: 0;
}

.footer-company-about span {
  display: block;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
}

.footer-icons {
  margin-top: 25px;
}

.footer-icons a {
  display: inline-block;
  width: 35px;
  height: 35px;
  cursor: pointer;
  background-color: #33383b;
  border-radius: 4px;
  font-size: 20px;
  color: #ffffff;
  text-align: center;
  line-height: 35px;
  margin-right: 3px;
}

.left-links {
  margin-right: 10px;
}

.img {
  width: 300px;
  height: 2000px;
  top: 0;
  left: 0;
  z-index: 3;
  animation: slideshow 12s linear 0s infinite;
  background-repeat: no-repeat;
  background-size: cover;
}

/*
                img:nth-child(2) {
                    z-index: 2;
                    animation-delay: 4s;
                }

                img:nth-child(3) {
                    z-index: 1;
                    animation-delay: 8s;
                }*/

@keyframes slideshow {
  25% {
    background-image: url("http://dummyimage.com/280x200/56AD30/fff.png&text=1");
  }

  33.33% {
    background-image: url("http://dummyimage.com/280x200/1560f0/fff.png&text=2");
  }

  91.66% {
    background-image: url("http://dummyimage.com/280x200/C03229/fff.png&text=3");
  }

  100% {
    background-image: url("http://dummyimage.com/280x200/56AD30/fff.png&text=1");
  }
}
<!DOCTPYE html>
  <html>

    <body>

      <div class="img"></div>
        <footer class="footer">
          <div class="footer-left">
            <h3>Forever<span>Fit</span></h3>
            <div class="footer-links">
              <a class="left-links" href="#">Frakt & Leverans</a>
              <a class="left-links" href="#">Returrätt</a>
              <a class="left-links" href="#">Ångerrätt</a>
              <a class="left-links" href="#">FAQ</a>
            </div>
          </div>
          <div class="footer-center">
            <div>
              <i class="fa fa-map-marker"></i>
              <p><span>Malmö</span>Sverige</p>
            </div>
            <div>
              <i class="fa fa-phone"></i>
              <p>Ett nummer</p>
            </div>
            <div>
              <i class="fa fa-envelope"></i>
              <a href="mailto:support@company.com">Email@någonting</a>
            </div>
          </div>
          <div class="footer-right">
            <p class="footer-company-about">
              <span>Om oss</span>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
            <div class="footer-icons">
              <a href="#"><i class="fa fa-facebook"></i></a>
              <a href="#"><i class="fa fa-twitter"></i></a>
              <a href="#"><i class="fa fa-instagram"></i></a>
              <a href="#"><i class="fa fa-youtube"></i></a>
            </div>
          </div>
        </footer>
    </body>

  </html>

我对您的代码所做的更改是-

  1. 我上面提到的变化
  2. 用单个 div 标签替换了 img 标签。
  3. 在动画中，背景 url 现在发生了变化。
  4. 微小overflow: auto;的变化，如添加页脚等。（大部分不相关）

推荐阅读