Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Закрпить футер внизу

Автор: vintyara 31.1.2008, 13:12

Люди, подскажите, как можно закрепить футер чтобы он постоянно был в самом низу экрана браузера ?
Если сделать абсолютное позиционирование и сделать bottom:0 то так и получится, но если контент будет слиишком большой (уходить вниз) - то футер так и останется на своём месте, а контент пойдёт ниже :(

Автор: WebDisaster 31.1.2008, 16:46

Цитата(vintyara @ 31.1.2008, 13:12

)

Люди, подскажите

Подсказываем. Это не делается одной хитрой кнопочкой. Понажимать придётся много чего.

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
<!--

html {
   padding: 0;
   margin: 0;
   height: 100%;
   width: 100%;}
body {
   position: relative;
   padding: 0;
   margin: 0;
   min-height: 100%;
}

* html body {
   height: 100%;
}

#content {
   background-color:#669900;
   width: 100%; 
   padding-bottom: 60px;
}


#footer {
   background-color:#CCCC00;
   padding: 1px 0px;
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 40px;
}

-->
</style>
</head>
<body>

<div id="content">
<p>Здесь вывод хедера и контента</p>
</div>
<div id="footer">
<p>Это наш футер </p></div>
</body>
</html>

Автор: KonstRuctor 5.2.2008, 00:02

В ФФ 2, Opera 9.25 присутствует небольшой вертикальный скроллинг, на один поворот колесика мыши.
В ИЕ 7, ИЕ 6 такое не наблюдается -- скроллинга нет.

Автор: WebDisaster 5.2.2008, 05:29

Цитата(KonstRuctor @ 5.2.2008, 00:02

)

присутствует небольшой вертикальный скроллинг

потому, что это заготовка, а не свёрстанная и готовая к употреблению страница. Скрол есть из-за "вываливания" верхнего марджина первого вложенного в div#content блочного элемента (в моём примере это <p>). В IE не "вываливается" потому, что там несколько иначе работает блочная модель. Обнулите верхний марджин (p {margin-top: 0;}) и ничего скролится не будет.