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

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.

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

psywalker · April 3, 2011

А ты так отодвинь футер незаметненько.

novicheG · April 3, 2011

А ты так отодвинь футер незаметненько.

Не понял? Тут обтекание - принципиально, так как макет будет двухколоночным, и в случае растягивания второй колонки по высоте - контент футера должен именно обтекать левый блок. Я просто специально его (блок контента) не стал здесь показывать чтобы на самой задаче внимание сосредоточить.

Edited April 3, 2011 by novicheG

Gaspode · April 3, 2011

margin-left: 200px; для футера помогает в Хроме, если я правильно задачу понял.

novicheG · April 3, 2011

margin-left: 200px; для футера помогает в Хроме, если я правильно задачу понял.

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

novicheG · April 5, 2011

Может на картинке будет понятнее что должно происходить (если футер к примеру больше):

Edited April 5, 2011 by novicheG

SelenIT · April 5, 2011

Высота и ширина куска левой колонки, "врезающегося" в футер, известны (высота — 40px, я полагаю)? Если да — так вделать в футер прозрачную пустышку соотв. размера, с float:left, а левую колонку пустить поверх с помощью position:relative и z-index'а...

novicheG · April 5, 2011

Высота и ширина куска левой колонки, "врезающегося" в футер, известны..

Нет, размеры конечно неизвестны, высота left зависит от контента (я писал об этом), ширина может быть как фикс так и резина если были бы фиксы я бы и сам давно уже сделал Естественно имеется ввиду без JS - с JS тоже проблемы бы не было как таковой - можно брать размеры left-а

Edited April 5, 2011 by novicheG

psywalker · April 5, 2011

Боюсь, что невозможно решить эту задачу обычным CSS

SelenIT · April 5, 2011

Ну высота области перекрытия известна же, как я понимаю — 40px. А общая ширина футера равна ширине враппера, поэтому даже если ширина левой колонки задается в процентах, ничто не мешает задать столько же процентов для пустышки...

novicheG · April 5, 2011

Да нет, задача предусматривалась для двухколоночного макета, толкать вниз футер могут: и (1-я колонка) left, и (2-я колонка) content, поэтому если высота контента будет приближаться к высоте left - перекрытие будет всегда разное, более того - если высота контента станет больше высоты left - эта самая "пустышка" так и будет торчать.

Да, пади, psywalker прав, без JS не решишь. Однако в правильных браузерах мое решение работает... вебкиты и ранние ишаки гонят...

psywalker · April 5, 2011

Да нет, задача предусматривалась для двухколоночного макета, толкать вниз футер могут: и (1-я колонка) left, и (2-я колонка) content, поэтому если высота контента будет приближаться к высоте left - перекрытие будет всегда разное, более того - если высота контента станет больше высоты left - эта самая "пустышка" так и будет торчать.
Да, пади, psywalker прав, без JS не решишь. Однако в правильных браузерах мое решение работает... вебкиты и ранние ишаки гонят...

А вопросы есть:

1. Футер всегда должен быть прижат к низу? Даже если нет контента вообще. К низу окна браузера?

2. Футер должен тоже растягиваться чтоли по высоте?

3. Высота wrappera должна быть я так понял на всю высоту экрана?

novicheG · April 5, 2011

А вопросы есть:
1. Футер всегда должен быть прижат к низу? Даже если нет контента вообще. К низу окна браузера?
2. Футер должен тоже растягиваться чтоли по высоте?
3. Высота wrappera должна быть я так понял на всю высоту экрана?

1. Нет, футер должен идти после left и content (для этого ставиться div clear:left), т.е. после блоков с содержимым.

2. Ну оставим его высоту в покое - она фиксированная)

3. Нет, высота wrappera зависит от высоты left и content, их высота в свою очередь зависит от содержимого. (wrapper сюда я добавил просто для того чтобы визуально было лучше видно)

Вот, можешь, (если есть интерес), глянуть, - это мое решение - работает именно так как и нужно, (чтобы увидеть можно помучать браузер - поизменять его размер, посмотреть как плавают элементы) - в ИЕ8 (ие9 нету - не проверял) FireFox, Opera.

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
			</div>
			<div class="right">
				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 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
				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>
	</body>
</html>

CSS:


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

(wrapper - никакой функциональной роли не играет! вставил его просто для наглядности!)

rediskavet · April 5, 2011

А если футер вставить в правую колонку, тогда ведь он точно будет обтекать левую?

Или я не прально понял?

novicheG · April 5, 2011

А если футер вставить в правую колонку, тогда ведь он точно будет обтекать левую?
Или я не прально понял?

Не, неправильно понял Как же она будет обтекать - она будет в блоке у которого задан отступ.

rediskavet · April 5, 2011

да, туплю. Но думаю понятно что я здесь не помощник, я даже в вопрос не могу вникнуть

SelenIT · April 5, 2011

А нельзя ли, раз высота футера в принципе может быть плавающей и наползание левой колонки в принципе допустимо, вообще... отказаться от выпихивания футера ниже левой колонки? А <div class="clear"></div> перенести внутрь самого футера, в конец? Ну будет в самом худшем случае, когда в правой колонке совсем мало текста, основная часть таблички, футер выше чем обычно... Зато при нормальном заполнении всё будет симпатично при любых размерах экрана

psywalker · April 5, 2011

А нельзя ли, раз высота футера в принципе может быть плавающей и наползание левой колонки в принципе допустимо, вообще... отказаться от выпихивания футера ниже левой колонки? А <div class="clear"></div> перенести внутрь самого футера, в конец? Ну будет в самом худшем случае, когда в правой колонке совсем мало текста, основная часть таблички, футер выше чем обычно... Зато при нормальном заполнении всё будет симпатично при любых размерах экрана

Дружище, а ты не мог бы показать пример плиз в виде кода.

SelenIT · April 5, 2011

Ну вот как-то так :

<!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=""/>
                <style type="text/css">
.wrapper {
        overflow: hidden;
        border: 1px solid red;
        background: #f0f0f0;
}
.left {
        width: 200px;
        float: left;
        background: #64a6d2;
}
.right {
        margin-left: 200px;
        background: #c3c3c3;
}
.clear {
        clear: left;
}
.footer {
        min-height: 100px;
        background: #0959a2;
}
                </style>
        </head>
        <body>
                <div class="wrapper">
                        <div class="left">
                                Left Left Left Left Left Left Left Left Left Left
                                Left Left Left Left Left Left Left Left Left Left
                                Left Left Left Left Left Left Left Left Left Left
                                Left Left Left Left Left Left Left Left Left Left
                                Left Left Left Left Left Left Left Left Left Left
                                Left Left Left Left Left Left Left Left Left Left
                                Left Left Left Left Left Left Left Left Left Left
                        </div>
                        <div class="right">
                                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 Content Content Content 
                                Content Content Content Content Content Content
                                Content Content Content Content Content Content 
                                Content Content Content Content Content Content
                        </div>
                        <div class="footer">
                                Footer Footer Footer Footer Footer Footer Footer
                                Footer Footer Footer Footer Footer Footer Footer
                                Footer Footer Footer Footer Footer Footer Footer
                                Footer Footer Footer Footer Footer Footer Footer
                                Footer Footer Footer Footer Footer Footer Footer
                                <div class="clear"></div>
                        </div>
                </div>
        </body>
</html>

psywalker · April 5, 2011

Ухты, спасибо дружище. Но есть два нюанса:

1. <div class="clear"></div> - зачем тогда вообще нужна эта штука, вроде и без неё так же пашет?

2. В ИЕ7 немного косячно, т.е. текст футера с фоном НЕ залазит под левую колонку

SelenIT · April 5, 2011

1) И вправду незачем не посмотрел, что у враппера overflow:hidden эту задачу уже решает чтобы гарантированно прижать нижнюю границу футера к низу враппера

2) Эх... hasLayout, чтоб ему, из-за min-height... да, проблемко

Edited April 6, 2011 by SelenIT

psywalker · April 6, 2011

1) И вправду незачем не посмотрел, что у враппера overflow:hidden эту задачу уже решает
2) Эх... hasLayout, чтоб ему, из-за min-height... да, проблемко

Слушай, а я тогда вообще не пойму, в чём подвох этой задачи, если на так просто решается, да и вообще всё это похоже на то, что как будто из мухи сделали слона В чём же подвох то?

novicheG · April 6, 2011

А нельзя ли, раз высота футера в принципе может быть плавающей и наползание левой колонки в принципе допустимо, вообще... отказаться от выпихивания футера ниже левой колонки? А <div class="clear"></div> перенести внутрь самого футера, в конец? Ну будет в самом худшем случае, когда в правой колонке совсем мало текста, основная часть таблички, футер выше чем обычно... Зато при нормальном заполнении всё будет симпатично при любых размерах экрана

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

SelenIT · April 6, 2011

Тогда, по-моему, требования задачи включают взаимоисключающие параграфы — чтоб обе колонки "выпирали", но при этом левая колонка не "выпирала", а "обтекалась". Мой вариант (div с clear, по зрелому размышлению, оказался всё-таки нужен) дает некое приближение — нижняя граница футера "выперта" (прижата к низу, как заказано) при любом раскладе, но его высота может "плавать". Если добавить ограничение на высоту футера — тогда, конечно, сложнее... надо думать дальше, но, похоже, кроссбраузерно без JS никак.

novicheG · April 6, 2011

Нет, взаимоисключающих требований здесь нет, щас объясню: представьте left стал 200px content 180px футер при этом 40px - чуете что должно происходить? - часть футера будет за left а часть (ниже) под left и контент футера обтекает блок left. Чтобы понять можно скопипастить мое решение и поизменять размер браузера/ подабавлять/поубирать контент - работает именно так как и нужно (в Opera, FF, IE8).

UPD

По сути вот, возможны три варианта:

(скрины - что в какой ситуации должно происходить)

1. Высота блока left > высоты блока content

2. Высота блока left = высоте блока content

3. Высота блока left < высоты блока content

Edited April 6, 2011 by novicheG

psywalker · April 6, 2011

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

Sign In

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

Question

Link to comment

Share on other sites

32 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information