Задачка. Обтекаемый футер снизу.

novicheG · April 3, 2011

Всем Добрый день.

Есть следующий вопрос: как можно сделать обтекающий слой прижатым к низу (см. изображение). Высота wrapper будет зависить соответственно от кол-ва контента в блоке left с указанным float.

Для вроде бы простой проблемы - в инете решений не нашел (есть только решения для фиксированной высоты), пробовал делать сам следующим образом (путем добавления блока с clear:left и вымещением вверх футера margin-top:-40px;):

HTML:


<!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>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>Two-column</title>
		<meta name="description" content=""/>
		<meta name="keyword" content=""/>
		<link type="text/css" href="css/styles.css" rel="stylesheet"/>
		<style type="text/css">			
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="left">
				Content Content	Content
				Content Content	Content
				Content Content	Content
				Content Content	Content
				Content Content	Content
				Content Content	Content
				Content Content	Content
				Content Content	Content
				Content Content	Content
				Content Content	Content
				Content Content	Content
				Content Content	Content
				Content Content	Content
			</div>			
			<div class="clear"></div>
			<div class="footer">
				Content Content	Content
				Content Content	Content
				Content Content	Content
			</div>
		</div>
	</body>
</html>

CSS:


.wrapper {
	overflow: hidden;
	border: 1px solid red;
	background: #f0f0f0;
}
.left {
	width: 200px;
	float: left;
	background: #64a6d2;
}
.clear {
	clear: left;
}
.footer {
	height: 40px;
	margin-top: -40px;
	background: #0959a2;
}

- Все работает как надо в Opera, FireFox, IE8 - бэкграунд под слоем, контент обтекается. Не работает в вебкитах - контент не обтекается. И не работает в ие6-7.

Есть ли у кого-нибудь какие идеи?

novicheG · April 6, 2011

Да е-мое

Н-да, про самый первый то вариант я и забыл - огрех конечно мой - я нифига наверно не умею хорошо объяснять)) извиняюсь)

4. Высота блока left > высоты блока content (больше не менее чем на высоту футера)

rediskavet · April 6, 2011

Ну вот Селенит уже привёл почти готовое решение же? Только в ИЕ7 есть недочёт некий.

Не работает для фиксированной высоты футера. А это одно из условий как я понял.

Даже если сделать футер резиновым по высоте то, левая колонка не толкает вниз футер в низ. Например если левая будет в два раза выше правой то верх футера останется прижатым к низу правой колонки, при этом растянется в высоту.

Подписался на тему, оч. интересно узнать ответ.

psywalker · April 6, 2011

Т.е. выходит, что футер ещё и прижат всё таки?

rediskavet · April 6, 2011

Высота блока left > высоты блока content (больше не менее чем на высоту футера)

Опять стало не понятно. Если это обязательное условие и высота левой колонки всегда больше на высоту футера чем высота правой колонки, тогда зачем обтекание. Путсь футер всегда будет находиться в правой колонке, а там уже будет прижат к низу.

Edited April 6, 2011 by rediskavet

psywalker · April 6, 2011

Запутанная история, но интересная. Детектив.

novicheG · April 6, 2011

Т.е. выходит, что футер ещё и прижат всё таки?

Да, Макс, он прижат - но прижат не к низу браузера, а представь что прижат как бы к низу блока wrapper (для чего (для наглядности) я и вставил его с красной рамкой), а высота wrapper в свою очередь изменяется взависимости от наполненности двух блоков: left и content, в свою очередь изменять wrapper могут по отдельности и left и content. Теперь понятно?)

Edited April 6, 2011 by novicheG

psywalker · April 6, 2011

"Господи, как же до них достучаться, как же до них достучаться.." ©Eric Cartman, South Park
Да, Макс, он прижат - но прижат не к низу браузера, а представь что прижат как бы к низу блока wrapper (для чего (для наглядности) я и вставил его с красной рамкой), а высота wrapper в свою очередь изменяется взависимости от наполненности двух блоков: left и content, в свою очередь изменять wrapper могут по отдельности и left и content. Теперь понятно?)

Да, вот теперь всё стало ясно.

Sign In

Задачка. Обтекаемый футер снизу.

Question

novicheG

Link to comment

Share on other sites

32 answers to this question

Recommended Posts

novicheG

Link to comment

Share on other sites

rediskavet

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

rediskavet

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

novicheG

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information