Есть страница структуры:
<body>
<div class="wrapper">
<header></header>
<div class="class-1"></div>
<div class="class-2"></div>
<div class="class-3"></div>
<footer></footer>
</div>
</body>
Для того,чтобы фиксировать футер всегда внизу страницы я добавил ему стили
position:absolute
bottom:0;
Также создал медиазпросы:
@media screen and (min-width: 1200px) {
.wrapper {
margin-bottom: 125px;
}
}
@media screen and (max-width: 1200px) {
.wrapper {
margin-bottom: 210px;
}
}
Все вроде бы неплохо, однако в некоторых случаях <div class="class-3"></div>
заползает чутка под футер. Это происходит, потому что я задал ему position: absolute
. В сети видел,что это решается тем,что обертке содержимого страницы присваивается отступ. Однако в моем случае контейнеры с содержимым не имеют обертку и идут друг за другом. И крайний контейнер с содержимым может меняться в зависимости от страницы. Как в таком случае лучше поступить и подогнять содержимое к футеру?
PS поменять разметку не могу