Прижатый footer

sakolskiwlad · 22.01.2010

Всем привет!
При верстке сайта возникла проблема: требуется прижать футер к нижней границе окна браузера !Но только тогда, когда
контента меньше, чем высота окна браузера , а когда контента больше футер должен уехать вниз...
position:fixed bottom: 0; почему-то не помогает

Подскажите так в чем же дело!!!

Creator · 23.01.2010

Используйте отрицательный margin:

Код:

#wrapper {
	width: 100%;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

#footer {
	margin: -100px auto 0;
	height: 100px;
	background: #f5f5f5;
}

HTML:

<div id="wrapper">
	blabla
</div>

<div id="footer">
Footer
</div>

sakolskiwlad · 23.01.2010

Не помогает(

Creator · 23.01.2010

Должен работать) Приложите код, посмотрю.

sakolskiwlad · 23.01.2010

ЛУчше тут
http://free-programms.6te.net/

КСтати после модернизации появились проблемы в Gchrom i opera(
В firefox вроде корректно...
P.S. Жду помощи)

gor · 23.01.2010

Creator прав, просто в стилях нужно прописать размеры окна и документа

Код:

body {
        width:100%;
        height:100%;
        padding:0;
        margin:0;
}
#wrapper {
        width: 100%;
        min-height: 100%;
        height: auto !important;
        height: 100%;
}

#footer {
        margin: -100px auto 0;
        height: 100px;
        background: #f5f5f5;
}

sakolskiwlad · 23.01.2010

К сожалению не работает

прописал как советовали...

gor · 23.01.2010

Да действительно. Попробуй это:

Код:

<!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=utf-8" />
<title>footer</title>
<style type="text/css">
body,html{width:100%;height:100%;padding:0;margin:0}
#wrapper {
	background:#acc;
        width: 100%;
        min-height: 100%;
        height: auto !important;
        height: 100%;
}

#footer {
        margin: -100px auto 0;
        height: 100px;
        background: #dda;
}
#content{
margin-bottom:100px;
}
</style>
</head>

<body>
<div id="wrapper">
	<div id="content">
content
		</div>
</div>
<div id="footer">
footer
</div>
</body>
</html>

sakolskiwlad · 24.01.2010

в firefox почти получилось
footer прижался но почемуто не до конца ... осталось где-то 10пикс
А в опере и хроме не действует - футер прилипает к вышестоящему блоку и текст этого блока попадает в футер...

результат: http://free-programms.6te.net/

gor · 24.01.2010

Попробуй этот код

Код:

<!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=utf-8" />
<title>Footer</title>
<style>
body,html,p,h1,h3,ul,ul li{padding:0;margin:0}
body, html{width:100%;height:100%}
ul{list-style-type:none}
/*-------------------------------------------header--*/
#header{min-height:10%;height:10%;background:#eee}
/*-------------------------------------------------*/

/*-------------------------------------------wrapper--*/
#wrapper{width:100%;min-height:80%;height:80%}
/*-----------------------------------------------------*/

/*-------------------------------------------center--*/
#center{}
#nav_bar{float:left;width:15%}
/*--------------------------------main--*/
#main{margin-left:15%;width:85%}
#main #mainText{background:#ccc;width:80%;float:left;}
#main #mainLeft{width:20%;background:#aaa;float:right}
/*------------------------------------*/
/*---------------------------------------------------*/

/*-------------------------------------------footer--*/
#footer{min-height:10%;background:#999999;clear:both;}
/*----------------------------------------------------*/
</style>
</head>

<body>
<!--HEADER-->
<div id="header">
<h3>header</h3>
</div>
<!--HEADER end-->

<!--wrapper-->
<div id="wrapper">

<!--CENTER-->
<div id="center">

	<!--nav_bar-->
<div id="nav_bar">
   <ul>
	<li>nav_bar</li>
	<li>Програмы для дому</li>
	<li>link 1</li>
	<li>link 2</li>
	<li>link 3</li>
	<li>link 4</li>
	<li>link 5</li>
	<li>link 6</li>	
	<li>link 7</li>
   </ul>
</div>
	<!--nav_bar-->

<!--main-->
<div id="main">

	<!--mainText-->
<div id="mainText">
<p><h1>Скоро здесь появиться сайт )</h1></p>
  <p> laoreetPraesent mauris mi, adipiscing non,
 mollis eget, adipiscing ac, erat.Praesent mauris mi, adipiscing non,
 mmollis eget, adipiscing ac, erat.Praesent mauris mi, adipiscing non,
 mollis eget, adipiscing ac, erat.Praesent mauris mi, adipiscing non,
 mollis eget, adipiscing ac, erat.Praesent mauris mi, adipiscing non,
 mollis eget, adipiscing ac, erat.Praesent mauris mi, adipiscing non,
 mollis eget, adipiscing ac, erat.Praesent mauris mi, adipiscing non,
 mollis eget, adipiscing ac, erat.Praesent mauris mi, adipiscing non,mollis eget, adipiscing ac, erat.Praesent mauris mi, adipiscing non,
 mollis eget, adipiscing ac, erat.Praesent mauris mi, adipiscing non,mollis eget, adipiscing ac, erat.Praesent mauris mi, adipiscing non,
 mollis eget, adipiscing ac, erat.Praesent mauris mi, adipiscing non,
 ng ac, erat.Praesent mauris mi, adipiscing non,
 mollis eget, adipiscing ac, erat.Praesent mauris mi, adipiscing non,
 mmollis eget, adipiscing ac, erat.Praesent mauris mi, adipiscing non,
 mollis eget, adipiscing ac, erat.Praesent mauris mi, adipiscing non,
 mollis eget, adipiscing ac, erat.Praesent mauris mi, adipiscing non,
 mollis eget, adipiscing ac, erat.Praesent mauris mi, adipiscing non,
 mollis eget, adipiscing ac, erat.Praesent mauris mi, adipiscing non,
 mollis eget, adipiscing ac, erat.Praesent mauris mi, adipiscing non,mollis eget, adipiscing ac, erat.Praesent mauris mi, adipiscing non,
 mollis eget, adipiscing ac, erat.Praesent mauris mi, adipiscing non,mollis eget, adipiscing ac, erat.Praesent mauris mi, adipiscing non,
 mollis eget, adipiscing ac, erat.Praesent mauris mi, adipiscing non,
 ng ac, erat.Praesent mauris mi, adipiscing non,
 mollis eget, adipiscing ac, erat.Praesent mauris mi, adipiscing non,
 mollis 
 mollis eget, adipiscing ac, erat
bla bla 
</p>

</div>
	<!--mainText end-->

	<!--mainLeft-->
<div id="mainLeft">
  <ul>
    <li>Программы для офиса</li>
    <li>link two</li>
    <li>link two</li>
    <li>consectetuer adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti.</li>
  </ul>

</div>
	<!--mainLeft end-->

</div>
<!--main end--> 

</div>
<!--CENTER end-->

</div>
<!--wrapper end-->

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

для IE<8 - нужно частное решение.

sakolskiwlad · 24.01.2010

Большое спасибо вроде работает, Но все таки как быть с IE7? (посмотрел - там тихий ужасс! сайт перестает быть резиновым блоки наплывают один на другой)
Ведь исходный код работал...
Может это из-за ширины блоков в процентах?

gor · 25.01.2010

, Но все таки как быть с IE7?

Отдельные стили подключать, типа:

Код:

 <!--[if IE 7]>
   <style type="text/css">
   /* стиль для IE 7*/
  </style>
  <![endif]-->

maq1 · 09.02.2010

Для начала в index.php
перед футером чистишь от наследования

Код:

<div id="clear"></div>

<div id="footer">Соответственно сам футер</div>

и соответственно так это прописывается в css

Код:

#clear{
clear:both;
height:0;
font-size:1px;
line-height:0px;
}

#footer {
        margin-bottom:0;
        height: 100px;
        background: #f5f5f5;
}

и во всех браузерах будет всё ровно)))

Прижатый footer

sakolskiwlad

Active Member

Creator

Administrator

sakolskiwlad

Active Member

Creator

Administrator

sakolskiwlad

Active Member

gor

Well-Known Member

sakolskiwlad

Active Member

gor

Well-Known Member

sakolskiwlad

Active Member

gor

Well-Known Member

sakolskiwlad

Active Member

gor

Well-Known Member

maq1

Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей