Footer по нижнему краю

inweb · September 14, 2008

Здравствуйте, уважаемые!

Ну никак не могу найти достойного решения следующей задачи:

Есть макет: Шапка (фикс. высота и ширина), Блок контента (фикс ширина и на 100% высота) и футер который будет прижат к нижнему край окна (даже при малом и бОльшом количестве контента). Ну никак не соображу как сделать, а готового решения до сих пор не нашел. Верстать надо блоками, ведь 21 век на дворе

Буду признателен за помошь!

Azadi · September 14, 2008

Здравствуйте, уважаемые!
Ну никак не могу найти достойного решения следующей задачи:
Есть макет: Шапка (фикс. высота и ширина), Блок контента (фикс ширина и на 100% высота) и футер который будет прижат к нижнему край окна (даже при малом и бОльшом количестве контента). Ну никак не соображу как сделать, а готового решения до сих пор не нашел. Верстать надо блоками, ведь 21 век на дворе
Буду признателен за помошь!

Футер всегда прижат к нижнему краю окна просмотра браузера, или вы просто неудачно выразили свою мысль? Если так и надо, то используйте position:fixed для FF и position:absolute для IE (за подробностями в Гугл, в инете куча статей про эмуляцию фиксированного позиционирования для IE).

А вообще, техник много:

http://trifler.ru/blog/i/layouts/ideal/pro...end_ugg_100.htm

http://gruzzilkin.110mb.com/three-col-layout/

Victor Ananiev · September 14, 2008

http://softwaremaniacs.org/forum/viewtopic.php?id=34

September 14, 2008

Footer Gordi

Deacon · September 14, 2008

Всё что выше имеет некоторые проблемки: куча дополнительных блоков + Opera в окне развёрнутом, не на весь экран, если регулировать только высоту окна, то при увеличении футер не едет вниз.

Вот решение, которое у меня работает исправно во всех отношениях, единственное что заметил, это в Opera футер ползёт в низ при описанном случае выше, но при уменьшении высоты окна остаётся на месте и появляется вертикальная прокрутка.

<html>
<body>

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

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

</body>
</html>

* {
  margin: 0;
  padding: 0;
}
html {height: 100%;}
* html body {height: 100%;}
body {
  min-height: 100%;
  position: relative;
}
#content {
  padding-bottom: 100px;
}
#footer {
  position: absolute;
  bottom: 0;
  height: 80px;
}

Источник: http://dimox.name/press_footer_bottom_with_css/

Что кто думает? Гуру вёрстки, выложите решения, которые используете вы.

Edited September 14, 2008 by Deacon

Argus · September 15, 2008

Всегда пользовался таким вот несложным решением (как говорится, чем проще метод, тем меньше с ним проблем потом)

<style type="text/css">
* { padding:0; margin:0; }
html,body {height:100%;}
.all {min-height:100%; _height:100%;}
.content {padding-bottom:110px;}
.footer {height:100px; margin-top:-100px;}
</style>
...
<body>
<div class="all">
<div class="content">

</div>
</div>
<div class="footer">

</div>
</body>

У div.content паддинг нижний равен высоте футера + запас отступа.

У div.footer явно видно, что отрицательный маргин равен высоте.

Edited September 15, 2008 by Argus

Deacon · September 15, 2008

Но опять же обёрточный див, который никакой роли не выполняет на сайте, только вёрстке

Где там Дима Волотко или Влад? Может они расскажут?

Victor Ananiev · September 15, 2008

а какие проблемы с обертлочным дивом, что жалко 2 строк?

inweb · September 16, 2008

я искал и тоже нашел решение в интере

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<Head>
  <Title>Test</Title>
  <Style>
	html, body {
	  height:100%; margin:0;
	}

	html>body {
	  min-height:100%;
	  height:auto;
	}

	body {
	  position:relative;
	}

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

	#main {
	  padding-bottom:50px;
	}

	#header,
	#footer {
	  color:white; background:green;
	  height:50px;
	}
  </Style>
<Body>
<div id="header">Header</div>
  <div id="main">
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  </div>
<div id="footer">Footer</div>

вот здесь оригинал

Deacon · September 16, 2008

а какие проблемы с обертлочным дивом, что жалко 2 строк?

Понимаешь, они там просто нахер не всрались. Где две: там и три и четыре лишние строки, да и с десяток наберётся и с два.

вот здесь оригинал

Кстати тоже проверял это решение. Не помню, но в каком-то браезер не работало оно как надо.

А ну правильно, футер к низу не уходит в Opera.

Sign In

Footer по нижнему краю

Question

inweb

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Azadi

Link to comment

Share on other sites

Victor Ananiev

Link to comment

Share on other sites

Guest Гость

Link to comment

Share on other sites

Deacon

Link to comment

Share on other sites

Argus

Link to comment

Share on other sites

Deacon

Link to comment

Share on other sites

Victor Ananiev

Link to comment

Share on other sites

inweb

Link to comment

Share on other sites

Deacon

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information