Как прижать футер книзу экрана?

Great Rash · March 5, 2009

Здравствуйте! Сразу оговорюсь, что прижимать просто так футер книзу я умею (хоть и считаю это совершенно ненужным...).

Теперь к сабжу. Есть такой код (код не мой, просто подходит для примера):

Код можно посмотреть на этой странице http://www.xs4all.nl/~peterned/examples/csslayout1.html

Там макет из хедера, контента и футера. Причем контент растянут на 100% по высоте.

Мне надо сделать так:

1. надо сделать хедер, допустим 100px по высоте

2. надо сделать футер, допустим 100px по высоте

3. самое интересное: надо сделать так чтобы между ними был контент, чтобы он был растянут на всю оставшуюся высоту экрана (как в примере по ссылке), но чтобы, если высота контента превышает высоту экрана, то у дива с контентом появлялся бы скролл (overflow: auto;). Надеюсь понятно объяснил?

Т. е. совершенно фиксированные хедер и футер, а между ними скролится контент.

Всю голову сломал, не могу придумать как это сделать... И вообще возможно ли такое без скриптов?

Victor Ananiev · March 5, 2009

overflow:auto;

zwie · March 5, 2009

position:fixed; не катит?)

просто сам учусь, интересно тоже.

Victor Ananiev · March 5, 2009

нет, overflow:auto; добавляет прокрутку)

Vlad · March 6, 2009

Посмотри здесь.

http://www.cssplay.co.uk/layouts/bodyfix.html

Great Rash · March 6, 2009

Victor Ananiev

Видимо вы невнимательно прочитали мой пост. Такое лично со мной часто случается...

zwie

Нет не поможет, можете попробовать если интересно. Если выйдет, то запостите сюда решение, буду только рад

Vlad

Огромное спасибо! То что нужно!

Victor Ananiev · March 6, 2009

Видимо вы невнимательно прочитали мой пост. Такое лично со мной часто случается...

Мдя... Точно, упустил))

Shugich · March 16, 2009

Все просто. Закидываем шапку и контент в отдельный блок и растягиваем его на 100% (высота), задаем минимальную высоту 100%. Футеру же задаем высоту и точно такой же параметр margin-top.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
	<title>Вот так вот</title>
	<style type="text/css">
	  html, body {height: 100%; background: #fff;}
	  #all {height: auto !important; min-height: 100%;}
	  #header {height: 100px; background: black;}
	  #footer {height: 100px; background: black; margin-top: -100px;}
	</style>
  </head>
  <body>
	<div id="all">
	  <div id="header"><!-- Шапка --></div>		
	  <div id="content"></div>
	  </div>
	</div>
	<div id="footer"><!-- Подвал --></div>
  </body>
</html>

RoleXXX · April 13, 2009

Решение очень простое, но! У вашего решения высота футера должна быть фиксированной и от этого значения зависят ещё два параметра (margin-top для футера и padding-bottom для all'a). Так что такое решение не годится.

Edited April 13, 2009 by RoleXXX

Sign In

Как прижать футер книзу экрана?

Question

Great Rash

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Victor Ananiev

Link to comment

Share on other sites

zwie

Link to comment

Share on other sites

Victor Ananiev

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Victor Ananiev

Link to comment

Share on other sites

Shugich

Link to comment

Share on other sites

RoleXXX

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information