Footer при margin:0 auto.

BobKadler · June 10, 2008

Друзья, вот пишите что хотите можете меня отсылать по множеству тем, которые уже обсуждались здесь, но я вновь хочу поднять вопрос фиксирования Footer'a по нижнему краю страницы.

Все решения которые есть на сайте работают только в случае если шаблон занимает всю ширину экрана, и в этом случае футер прижимается к нижнему краю и занимает всю ширину снизу.

А кто как прижимает футер если шаблон с позиционированием по центру страницы?

То есть центральный блок в котором вс? содержится имеет параметр {margin:0 auto;} и всегда центрируется по ширине?

рассчитываю на вашу компетентность и профессионализм, а не выкрики что мол двести раз было и т.д.

BobKadler · June 10, 2008

наш?л ответ если кому пригодится выкладываю:

решил проблему через JS

ДжаваСкрипт:

<script language="JavaScript" type="text/javascript"><!--
 var height=0;
 if (self.screen) // for NN4 and IE4
 {
 height = screen.height
 }
 else if (self.java) // for NN3 with enabled Java
 {
 var jkit = java.awt.Toolkit.getDefaultToolkit();
 var scrsize = jkit.getScreenSize();
 height = scrsize.height;
 } 
 if (document.getElementById){
 var main = document.getElementById('main');
 main.style.height = height+'px'; 
} 
 //--></script>

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

</head>
<body>
<div id="main">

 <div id="top"> 
 </div>
<!-- /div top -->

<div id="content"> 
</div>

 <!-- bottom -->
<div id="empty"> </div>
<div id="bottomall"> 
</div>

</div>

<!-- /div main -->
</body>
</html>

CSS

html {height: 100%; margin: 0; padding: 0;}

body {height: 100%; min-height: 100%; margin: 0; padding: 0;}

div#main{
 width:950px;
 background-color:#fff;
 margin: 0px auto;
 border-right: 1px solid #333;
 border-left: 1px solid #333;
 position: relative;
 min-height: 100%;
 }

div#top{
 height: 75px;
 overflow: hidden;
 }

#content{ 
 padding: 10px 25px 207px 25px;
 overflow: auto;
 width: 900px;
 height:auto;
 }

div#empty {visibility: hidden;}

div#bottomall{
 position: absolute;
 bottom: 0;
 width: 100%;
 }

BobKadler · June 10, 2008

Не работает в 6ом эксплорере.

BobKadler · June 10, 2008

Вот так проще, но по прежнему не работает в ИЕ6

var height = 0;
height = document.clientHeight; 
 if (document.getElementById){
 var mains = document.getElementById('main');
 mains.style.height = height+'px'; 
}

Elendor · June 10, 2008

http://xhtml.ru/2005/10/18/footer-stick/ - решение вашей проблемы

Sotnikov · June 10, 2008

мама не горюй..

это ты хотел?

http://sotnikovs.com/funny-funky-files/footer/

если подходит дядя, хоть спасибо не забудь сказать..)

BobKadler · June 10, 2008

Друзья, проблема в том что все эти решения они сделаны для ситуации когда контента на странице не много.

2 Sotnikov: Спасибо!!! Да решение хорошее, я тоже делал так, но в случае если контента много футер не сползает вниз, а продолжает висеть у конца окошка браузера. А мне нужно верстать под CMSb и я зарание не знаю сколько будет контента.

2 Elendor: Собственно ваше предложение страдает примерно той же проблемой )).

Я конечно не считаю себя великим монстром, но пока что лучше чем сво? решение я ничего не наш?л =)

Sotnikov · June 10, 2008

ща)

Sotnikov · June 10, 2008

В общем не стал тратить время, пока наладил так.. но до идеала можно еще поковырять.

http://sotnikovs.com/funny-funky-files/footer/

p.s. у футера, если знаешь высоту, то ставь е?, а верхний маргин увеличивай.

BobKadler · June 11, 2008

Высоту футера не знаю )).

Но за решение спасибо... мог бы я конечно и сам сообразить. просто куча разных шаблонов, одна страница из тр?х или четыр?х шаблонов формируется и в каждом разные куски кода. Щас интегрируемс ))

maddogrts · June 11, 2008

Высоту футера не знаю )). Мне интересно а почему не знаете ? у вас он везде разный чтоли ? Смысл прижимать тогда? Покажите хоть его.

BobKadler · June 11, 2008

Да, жаль решение хорошее, но применить не удалось, джаваскрипт работает над?жнее.... а тут приходится разные значения верхнего маргина для разных страниц задавать.

BobKadler · June 11, 2008

Я не могу это показать оно лежит на тестовом сервере. А высоту не знаю потому что она может поменяться в зависимости от контента внутри футера. Что мне тогда перев?рстывать весь сайт чтоли?

BobKadler · June 11, 2008

если при последнем примере футеру прописать вот так вот:

#footer{

position: absolute;

bottom: 0;

width: 100%;

}

То он прижимается во всех браузерах кроме IE6. Что делать с IE6 ума не приложу

homm · June 11, 2008

Прошу прощения за то, что не читал всех ответов, но я бы сделал так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <style type="text/css">
* html #page {
 height: 100%;}

html, body {
 height: 100%;
 margin: 0;
 padding: 0;}

body{
 background: #fff;
 color: #36393D;
 font-family: "Trebuchet MS";
 font-size: 18px;
 line-height: 22px;}

#page {
 min-height: 100%;
 background: blue;
 margin: 0 auto -80px;
 width: 1024px;}

#footer_cleaner {
 height: 140px;
 clear: both;}

#footer {
 height: 80px;
 line-height: 80x;
 background: red;
 text-align: center;
 margin: 0 auto;
 width: 1024px;}
 </style>
</head>
<body>
 <div id="page">

 <div id="footer_cleaner"></div>
 </div>
 <div id="footer"></div>
</body>
</html>

maddogrts · June 11, 2008

homm он высоты футера не знает

homm · June 11, 2008

homm он высоты футера не знает

Пусть срочно узнает Не видел никогда резиновых в высоту футеров. Мне кажется это будет сложно.

maddogrts · June 11, 2008

Я не могу это показать оно лежит на тестовом сервере. А высоту не знаю потому что она может поменяться в зависимости от контента внутри футера. Что мне тогда перев?рстывать весь сайт чтоли?

Видишь какая проблема ), неразбериха полная

ZoNT · June 11, 2008

контент внутри футера. Какое сочетание

Sotnikov · June 11, 2008

"Что мне тогда перев?рстывать весь сайт чтоли? Я же говорю тебе НЕ БЫЛО НИ ЕДИНОГО РАЗРЫВА с ноября прошлого года, тупица))"

и правда, к чему такое, где у футера будет меняться контент?.. единственное, что там может поменяться ? это контактный телефон или изменится слово в меню.

Sign In

Footer при margin:0 auto.

Question

Link to comment

Share on other sites

19 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information