Здравствуйте
Возникла такая проблема.
Есть сайт. Футер прижат книзу страницы через установку html, body высоты в 100%, а у контента min-height:100% и отрицательный отступ снизу на высоту футера.
На сайте есть скрипт который проматывает страницу к определенному элементу
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Тайтл</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="/css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="/js/scrollto-jquery-plugin.js"></script>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body">
<div id="body-container">
какой то контент
</div>
</div>
<div class="garant"></div>
</div>
<div id="footer"></div>
</body>
</html>
html, body{
height:100%;
min-width: 1200px;
}
#container{
min-height:100%;
position:relative;
}
div.garant{
height: 170px;
}
#footer{
height: 170px;
margin-top: -170px;
padding-top: 40px;
}
$(".besppartsscroltoposition").click(function(event){
event.preventDefault();
// сперва получаем позицию элемента относительно документа
var crc=$(this).attr('data-scrollposition');
var destination= $('#'+crc).offset().top;
$("body:not(:animated)").animate({ scrollTop: destination }, 1000);
$("html").animate({ scrollTop: destination }, 500);
});
Все хорошо, все работает. Но только в файрфоксе.
В хроме наотрез отказывается работать.
Гуглением выяснил, что проблема в том, что элементам html и body задана высота в 100%. И действительно, если этим элементам высоту в 100% убрать, то все работает.
Но тогда возникает проблема с футером, он не хочет быть прижатым к низу страницы.
Ни одного рабочего способа прижать футер к низу страницы без указания html и body 100% высоты не нашел.
Как побороть эту проблему?
Простой
