Трабл с футером(((

**s-tet** · 10.12.2006, 20:24

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

Проблема в том, что при ниже указанном коде, футер стоит не на нижней границе сайта, а на нижней границе !!! видимой его области !!!.

Как исправить этот косяк.

Код:

\ расположен непосредственно в <body>

html { position: relative; width: 100%; height: 100%; }

body { color: black; background-image: url(../img/bg.jpg); background-repeat: no-repeat; background-position: center top; position: relative; width: 100%; height: 100%; z-index: 2; margin: 0; }

.footer { background-image: url(../img/foot_lines.gif); background-repeat: repeat-x; position: absolute; left: 0; bottom: 0; width: 100%; height: 129px; z-index: 7; clear: both; }

**Zigzag** · 10.12.2006, 23:26

[Только зарегистрированные пользователи могут видеть ссылки. ]

**s-tet** · 11.12.2006, 02:22

Что делать(((((?????(((((

Первый вариант не подходит (т.к. появляются полосы пркрутки),
Второй в IE аналогичен первому а в FF и Опере не решает проблемы (Футер ездиет за нижней границей окна при изменении его размеров и прекрывает контент)мож что неправельно делаю:

Результат можно посмотреть здесь s-tet.ru

<body>
<div class="content">
<div class="main">
****
</div>
</div>
<div class="footer">
****
</div>
</body>

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

body {
background-image: url(../img/bg.jpg);
background-repeat: no-repeat;
background-position: center top;}

body {
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
}

.content{
padding-bottom: 129px; }

.main {
background-color: #669410;
position: relative;
width: 230px;
height: 100%;
margin-right: auto;
margin-left: auto;
min-height: 100%; }

.footer { background-image: url(../img/foot_lines.gif);
background-repeat: repeat-x;
text-align: center;
height: 129px;
width: 100%;
position: absolute;
bottom: 0;}

**makeitso** · 11.12.2006, 19:08

Код:

<!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" xml:lang="en" lang="en">
<head>
****<title></title>
****<style type="text/css">
****/*<![CDATA[*/
*****{margin: 0; padding: 0;}
****html, body{height: 100%;}
****
****#content{min-height: 100%;}
***** html #content{height: 100%;}
****
****#main{padding-bottom: 5em;}
****#footer{height: 5em; position: relative; margin-top: -5em; background: #DDD;}
****/*]]>*/
****</style>
</head>

<body>
****<div id="content">
 *<div id="main">
 *****asd

 *****asd

 *****asd

 *****asd

 *****asd

 *****asd

 *****asd

 *****asd

 *****asd

 *****asd

 *****asd

 *</div>
****</div>
****<div id="footer">
 *asd
****</div>
</body>
</html>

**s-tet** · 11.12.2006, 20:21

Огромное спасибо отличный вариант!!!!!

Попробую адаптировать под свой сайт))

Тема: Трабл с футером(((

Опции темы

Поиск по теме

Отображение

Похожие темы

проблема с футером

Трабл с урлом

Illustrator CS2 трабл

Трабл с Илюстратором или что?

Java и IE...Трабл... Хелп!

Ваши права