Я получил простой CSS-код с http://www.cssstickyfooter.com/, чтобы получить футер, который всегда остается на месте. независимо от того, насколько длинный контент. Теперь это на самом деле не работает. У меня две разные проблемы с этим нижним колонтитулом, но я собираюсь задать их обе здесь, потому что подозреваю, что они связаны.
Сначала вот css с сайта:
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
И вот HTML, который я использую для всей страницы:
<html>
<head>
<title>{$title_text}</title>
<link rel="stylesheet" type="text/css" href="/global/global.css" />
</head>
<body>
<div id="wrap">
{$navbar}<hr><div id="content">{$body}</div>
</div>
<div id="footer">
{$footer}
</div>
</body>
</html>
Как видите, некоторые переменные имеют формат {$variable}. Они извлекаются из другого файла/строки.
Проблема 1:
Нижний колонтитул слишком высокий и перекрывается с другим содержимым страницы. Вот как это выглядит:
Чтобы попытаться решить эту проблему, я добавил 200 пикселей отступа к div ID wrap, который находится прямо перед нижним колонтитулом (см. HTML выше). Это решит проблему, которую вы видите на картинке. Но это вызывает другую проблему: теперь на страницах с очень небольшим содержанием нижний колонтитул по-прежнему сдвинут вниз на 200 пикселей, и вам нужно прокрутить вниз, чтобы увидеть его. Сайт, с которого я получил этот код CSS, сказал, что этого не должно происходить.
Проблема 2:
Нижний колонтитул не достигает краев окна браузера. Вот о чем я говорю:
Нижний колонтитул должен соприкасаться с правой и левой сторонами окна, но, как вы можете видеть, здесь есть небольшое поле. Честно говоря, я не уверен, как начать исправлять это. Но я не думаю, что это ошибка, потому что она отображается одинаково в Chrome, Firefox и, я думаю, даже в Internet Explorer.
Любой вклад приветствуется. Спасибо, что посмотрели!
