页脚元素存在的问题：不会停留在页面底部

Question

我希望将页脚放在页面底部，但是我尝试了很多事情，但是都没有用。

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

<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:[email protected]">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/（请放映幻灯片；它只是用来显示问题。）

是否有解决此问题的方法？

Answer 1

我已经解决了问题，这是代码。

Codepen：https://codepen.io/Rishab2019/pen/oNjeOpz

.footer {
            
            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: bottom;
        }

        .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;
                
            }

             .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: 200px;
            height: 2000px;
            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;
            }
        }


#page-container {
  position: relative;
  
}

@media all and (max-width:859px){
  .footer{
    height:310px;
    
  }
  
  
}

<div id="page-container">
<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:[email protected]">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>
  </div>

Answer 2

编辑之前，我的答案对@Exiits毫无用处，因此我删除了该部分。

现在，对于您的答案，您的代码是完美的，只有position: absolute;除外。从position和.footer中删除.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:[email protected]">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;等。（最不相关）

Answer 3

谢谢你们两个的帮助！借助这两个代码以及我自己的一些知识，我终于解决了它！再次感谢您的帮助！