-
Необходимо создать футер фиксированной высоты на всю ширину, находяшийся строго в нижней части страницы.
Проблема в том, что при ниже указанном коде, футер стоит не на нижней границе сайта, а на нижней границе !!! видимой его области !!!.
Как исправить этот косяк.
Код:
\ расположен непосредственно в <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; }
-
[Only registered and activated users can see links. Click Here To Register...]
-
Что делать(((((?????(((((
Первый вариант не подходит (т.к. появляются полосы пркрутки),
Второй в 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;}
-
Код:
<!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>
-
Огромное спасибо отличный вариант!!!!!
Попробую адаптировать под свой сайт))
