Решил проблему вот таким костылем)
Можно конечно поиграться и с помощью @media задать разные параметры высоты под разные экраны. Но меня в целом этот вариант устроил.
Можно конечно задать высоту подвала в %, но тогда в моем случае придется переделывать весь подвал. Так он чуть скрывается за пределами экрана.
<div class="wrapper">
<header>
<!--ШАПКА-->
</header>
<main>
<!--Содержимое страницы-->
</main>
</div>
<footer>
<!--Подвал-->
</footer>
.wrapper {
width: 100%;
min-height: 80%;
background-color: #9b9c9e;
}
header {
width: 100%;
}
main {
margin: 0 10%;
width: 80%;
}
footer {
width: 100%;
background-color: #4a4949;
height: 300px;
}
Как только высота подвала становится "плавающей" то подвал становится поверх контента. Вариант плохой
Футер или "подвал" сайта прижимают к низу страницы с помощью правил каскадных стилей CSS. Но сейчас вся верстка идет в стандарте HTML5, а там предусмотрен функциональный тег <footer>. Так что задачу можно решить, обернув "подвал" в специальный тег и встроив его в верстку.
ах если бы всё так просто было
Лепим футер к низу на 0px, а перед ним подставляем нужной высоты блок, чтобы прокручивался до конца контент...
<div class="otstup"></div>
<div class="lepim"></div>
.otstup{padding-bottom: 50px;float:center;width:100%;height:50px;background:none;}
.lepim{position: fixed; bottom: 0; float:center;width:100%;height:50px;}
Футер же залазить на контент будет :/