Футер не прилипает к низу окна - HTML и CSS

antmihlin · 07.01.2011, 00:09

Столкнулся с тем, что футер не липнет к низу окна.
Перепробовал все что знаю, а он все никак.
Думаю может прога глюк дает. Печатаю в Share Point Designer и Dreamweaver .

Вот Html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>

<body>
<div id="wraper">
<div id="header">
<div id="name-banner">
</div>
<div id="main-menu">
</div>
</div>
<div id="container">
<div id="chapter-menu">
В тот момент отроковица на повозке богомерзкой Хьендай Гетц совершала маневр
перестроения за мною, в результате из-за моего экстренного торможения совершила наезд
в мою телегу сзади (схема и список повреждений прилагается)

</div>
<div id="comments">
От удара повозка моя продвинулась вперед и задавила Тузика нахрен. От полученных
повреждений тварь божия Тузик преставилась на месте.

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

Я, раб божий Васильев Дмитрий Михайлович, на 30-й минуте управления басурманской самодвижущейся
повозкою Мазда 323, будучи одержим бесом высокомерия, впал в грех нарушения заповедей трактового
передвижения. На перекрестке дорог Просвещения и Энгельса (да будет проклят этот антихрист!) я,
пренебрегши тем, что семафор червленный свет показывает, при повороте одесницу не пропустил пешехода
- отрока с божей тварью псом Тузиком. Нижайше прошу обратить внимание, что Тузик не был намертво
принайтован нашейным вервием. Тузик, одержимый праведным гневом на басурманскую мою повозку, начал
лаяти и под колеса мне бросился. Обуянный жалостию ко всякой твари божией я применил экстренное
торможение.
</div>
</div> 
<div id="footer">
В данном случае, мы воспользовались еще одной хитростью. Ведь этот список ничем не отличается от простого списка статей
</div> 
</div> 
</body>
</html>

А вот CSS:
* {margin:0;
padding:0;
border:0;
}
body {
margin:0;
padding:0;
border:0;
height: 100%;
}

/* Column Structure
---------------------------------------------*/

#wraper { width:1000px;
margin:0 auto;
background-color:#99FF99;
min-height:100%;
height:auto !important;
margin:0 auto 65px;
}
#header { height:224px;
}
#name-banner{ height:184px;
}

#main-menu{ height:38px;
background-color:#A8A76F;
}

#container{ position:relative;
}
#chapter-menu{ width:150px;
position:relative;
background-color:#730F0F;
float:left;
}

#content{ position:relative;
background-color:#B5B579;
width:700px;
margin:auto;
}

#comments{ width:150px;
position:relative;
background-color:#888757;
float:right;
}

#footer{ height:65px;
background-color:#A8A76F;
width:1000px;
}

Naive · 07.01.2011, 08:15

Код:

#footer {
    position: fixed; /* Фиксированное положение */
    left: 0; bottom: 0; /* Левый нижний угол */
}

antmihlin · 07.01.2011, 13:41

position:fixed Не подходит.
Футер должен быть в конце сайта.

Все решилось.
Установил position:fixed;
потом стер и прописал position:relative и все стало на место.

Спасибо

'

07.01.2011, 00:09	#1
antmihlin Новичок Джуниор Регистрация: 04.01.2011 Сообщений: 2	Футер не прилипает к низу окна Столкнулся с тем, что футер не липнет к низу окна. Перепробовал все что знаю, а он все никак. Думаю может прога глюк дает. Печатаю в Share Point Designer и Dreamweaver . Вот Html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="../css/style.css" /> </head> <body> <div id="wraper"> <div id="header"> <div id="name-banner"> </div><!--name-banner--> <div id="main-menu"> </div><!--main-menu--> </div><!--header--> <div id="container"> <div id="chapter-menu"> В тот момент отроковица на повозке богомерзкой Хьендай Гетц совершала маневр перестроения за мною, в результате из-за моего экстренного торможения совершила наезд в мою телегу сзади (схема и список повреждений прилагается) </div><!--chapter-menu--> <div id="comments"> От удара повозка моя продвинулась вперед и задавила Тузика нахрен. От полученных повреждений тварь божия Тузик преставилась на месте. </div><!--comments--> <div id="content"> Я, раб божий Васильев Дмитрий Михайлович, на 30-й минуте управления басурманской самодвижущейся повозкою Мазда 323, будучи одержим бесом высокомерия, впал в грех нарушения заповедей трактового передвижения. На перекрестке дорог Просвещения и Энгельса (да будет проклят этот антихрист!) я, пренебрегши тем, что семафор червленный свет показывает, при повороте одесницу не пропустил пешехода - отрока с божей тварью псом Тузиком. Нижайше прошу обратить внимание, что Тузик не был намертво принайтован нашейным вервием. Тузик, одержимый праведным гневом на басурманскую мою повозку, начал лаяти и под колеса мне бросился. Обуянный жалостию ко всякой твари божией я применил экстренное торможение. </div><!--content--> </div> <!--container--> <div id="footer"> В данном случае, мы воспользовались еще одной хитростью. Ведь этот список ничем не отличается от простого списка статей </div> <!--footer--> </div> <!--wraper--> </body> </html> А вот CSS: * {margin:0; padding:0; border:0; } body { margin:0; padding:0; border:0; height: 100%; } /* Column Structure ---------------------------------------------*/ #wraper { width:1000px; margin:0 auto; background-color:#99FF99; min-height:100%; height:auto !important; margin:0 auto 65px; } #header { height:224px; } #name-banner{ height:184px; } #main-menu{ height:38px; background-color:#A8A76F; } #container{ position:relative; } #chapter-menu{ width:150px; position:relative; background-color:#730F0F; float:left; } #content{ position:relative; background-color:#B5B579; width:700px; margin:auto; } #comments{ width:150px; position:relative; background-color:#888757; float:right; } #footer{ height:65px; background-color:#A8A76F; width:1000px; }

07.01.2011, 08:15	#2
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Код: `#footer { position: fixed; /* Фиксированное положение / left: 0; bottom: 0; / Левый нижний угол / }` Alar, верни репу!*

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Футер остается на месте	Southerner	HTML и CSS	4	30.09.2010 17:19
как сделать чтобы картинка была фоном в body в самом низу	aseeva_sonya	HTML и CSS	8	15.01.2010 16:14
футер прицепился к диву	ic-e	HTML и CSS	0	15.09.2009 16:31
приклеить к низу футер при верстке дивами	mitay	HTML и CSS	32	05.02.2009 23:47
Как сделать чтобы дочерние окна в MDI-приложениях были вне главного окна???	dimonchuk	Общие вопросы Delphi	1	11.08.2007 12:13

07.01.2011, 13:41	#3
antmihlin Новичок Джуниор Регистрация: 04.01.2011 Сообщений: 2	position:fixed Не подходит. Футер должен быть в конце сайта. Все решилось. Установил position:fixed; потом стер и прописал position:relative и все стало на место. Спасибо '