Попробуйте еще раз объяснить, как прибить футер к низу страницы - Веб-строительство

Прибить футер к низу страницы, как?

lazio · 2009-04-18T14:16:03.0000000Z

Как вы решаете эту проблему? Дело в том, что постоянно использовал метод с абсолютным позиционированием и указанием html,body {height:100%} , но сегодня вылезла ошибка,к элементу body нельзя повесить фоновое изображение выравненное с низу, при увеличении контента и появлении скроллинга, фон остается на том же месте(( С методом отрицательного верхнего отступа у футера тажа проблема. Вот минимальный код (bg.gif - полоска 1х300 пикс.): <!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" xml:lang="ru"> <head> <title>test</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <style type="text/css" media="screen"> * { margin:0; padding:0; } html,body { height:100%; } body { background:red url(bg.gif) bottom repeat-x; } #content { background:#EEE; width:600px; min-height:100%; position:relative; } * html #content { height:100%; } #footer { background:#CCC; position:absolute; bottom:0; left:0; width:600px; } </style> </head> <body> <div id="content"> контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент <div id="footer"> футер </div> </div> </body> </html> Спасибо!

47

lazio

19 апреля 2009, 12:02

#11

Попробую еще раз объяснить суть проблемы =)

kopusha, ваш код ниже (я только изменил фон блоков):


<!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" xml:lang="ru">

<head>

	<title>Прижатие footer к низу экрана/контента</title>

	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />



	<style type="text/css" media="all">

		* {

			margin: 0;

				padding: 0;

		border: 0;

		}

		html, body {

			width: 100%;

			height: 100%;

		}

		* html #container {

			height: 100%;

		}

		body {

			background: #CCC url(bg.gif) left bottom repeat-x;

			color: #333;

		}

		#container {

			position: relative;

			width: 960px;

			margin: 0 auto;

			min-height: 100%;

			background:#FFF;

		}

		.clearfloat {

			clear: both;

		}

		.empty {

			height: 50px;

		}

		#footer {

			position: relative;

			background: #333;

			width: 960px;

			height: 50px;

			color: #ccc;

			font-size: .9em;

			margin: -50px auto 0;

		}

	</style>

</head>



<body>

<body>

	<div id="container">

		<div id="header"></div>

		<div id="leftside"></div>

		<div id="rightside">

			<p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p>

		</div>

		<div class="clearfloat"></div>

		<div class="empty"></div>

	</div>

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

</body>

</html>

Обратите внимание, что для body прописан фон цветом и картинкой (background: #CCC url(bg.gif) left bottom repeat-x;), картинка должны распологатся всегда внизу экрана, но не распологается! Вот отсюда вопрос, как это сделать?

Приложил файл фона, просто засуньте код в html и сразу увидите баг=)

Также прилаживаю скрины, на них синий фон это картинка, должна быть всегда внизу экрана. Смотрите на положение скроллинга и синего фона

gif bg.gif

jpg bug.jpg

COMFI - Начни Зарабатывать! (http://affiliate.comfi.ru/a2/466735/Program-Overview)

[Удален]

19 апреля 2009, 15:05

#12

http://www.zakharov.ms/footer/

32

FeoOne

19 апреля 2009, 15:08

#13

#footer {

position: relative;

background: #333;

width: 960px;

height: 50px;

color: #ccc;

font-size: .9em;

bottom:0px;

left:0px;

}

175

kopusha

19 апреля 2009, 15:21

#14

Mr.Sm!th:
http://www.zakharov.ms/footer/

этот метод я дал вчера ещё. не сработает он для ТС, у него прикол с бекграундом. а как это решить - мой мозг не знает(

47

lazio

19 апреля 2009, 15:21

#15

ух.... опять не то)) Я знаю как прибить футер! вопрос не в этом... точнее не совсе в этом.

Не буду больше приводить код, т.к. его наверно никто не смотрит)) Подойду по-другому: как сверстать макет ниже??? условие только одно, футер при отсутствии текста должен быть прибит к низу страницы.

jpg verstka.jpg

Google не наказывает за Каким плагином для WordPress Вопрос по объектному кешированию

47

lazio

20 апреля 2009, 08:03

#16

.....Вверх =)

XL

1

x-legioner

21 апреля 2009, 10:44

#17

Вот глянь, может этот вариант тебя устроит, на всё что мне хватило мозгов.

Вроде и в Опере и Лисе и ИЕ футер всегда внизу и а текст можно тянуть или вообще не тянуть

Посмотри я закинул http://www.x-artstudio.de/100dv.html

x-legioner добавил 21.04.2009 в 14:52

x-legioner:
Вот глянь, может этот вариант тебя устроит, на всё что мне хватило мозгов.
Вроде и в Опере и Лисе и ИЕ футер всегда внизу и а текст можно тянуть или вообще не тянуть
Посмотри я закинул http://www.x-artstudio.de/100dv.html

Извини я лапухнулся, без текста подвал лезет на верх

194

Prior

21 апреля 2009, 11:00

#18

Варианты с использованием таблиц совсем не рассматриваются? Именно в этом случае их применение оправдано.

Ответы на вопрос - https://answers.net.pl

47

lazio

21 апреля 2009, 12:42

#19

Prior, может быть... но хотелось бы обойтись без таблиц! конечно если решение будет очень сложным или его вообще не будет, то таблица, и без вопросов))

Хотя с высотой проблему я решил, ща вродь она адекватна. НО появилась проблема с шириной... если получится исправить, покажу потом решение)

Старый трехзначный домен или pq.hosting начали воровать деньги Почему MySQL server has

95

Ткач

21 апреля 2009, 14:35

#20

Лень одно и тоже объяснять, вот тут недавно прописал тоже

Разработка и создание сайтов. Красиво, функционально, недорого. (http://time-online.ru/) ICQ 388-474-890)

VK приобрела 70% в структуре компании-разработчика red_mad_robot

Зачем быть уникальным в мире, где все можно скопировать

Прибить футер к низу страницы, как?