Jump to content
  • 0

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

inweb

Asked by inweb,

 Share

Question

inweb Explorer

inweb

Posted
Posted

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

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

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

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

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0
Azadi Explorer

Azadi

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

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

Есть макет: Шапка (фикс. высота и ширина), Блок контента (фикс ширина и на 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/

Link to comment
Share on other sites
  • 0
Deacon Explorer

Deacon

Posted
Posted (edited)

Всё что выше имеет некоторые проблемки: куча дополнительных блоков + 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 by Deacon
Link to comment
Share on other sites
  • 0
Argus Explorer

Argus

Posted
Posted (edited)

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

<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 by Argus
Link to comment
Share on other sites
  • 0
inweb Explorer

inweb

Posted
  • Author
Posted

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

<!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>

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

Link to comment
Share on other sites
  • 0
Deacon Explorer

Deacon

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

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept