До редактирования мой ответ был довольно бесполезным для @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: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>
Изменения, которые я внес в ваш код, -
- Изменения, которые я упомянул выше
- Заменен img теги с одним тегом div.
- В анимации теперь изменяется фоновый URL.
- Незначительные изменения, такие как добавление
overflow: auto; в нижний колонтитул и c. (В основном не имеет значения)