Jump to content
  • 0

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

novicheG

Asked by novicheG,

 Share

Question

novicheG Explorer

novicheG

Posted
Posted

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

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

c46b98457722.gif

Для вроде бы простой проблемы - в инете решений не нашел (есть только решения для фиксированной высоты), пробовал делать сам следующим образом (путем добавления блока с 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.

fceedb72e42c.gif

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

Link to comment
Share on other sites

32 answers to this question

Recommended Posts

  • 0
novicheG Explorer

novicheG

Posted
  • Author
Posted (edited)

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

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

Edited by novicheG
Link to comment
Share on other sites
  • 0
novicheG Explorer

novicheG

Posted
  • Author
Posted

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

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

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

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

Link to comment
Share on other sites
  • 0
novicheG Explorer

novicheG

Posted
  • Author
Posted (edited)

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

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

Edited by novicheG
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

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

Link to comment
Share on other sites
  • 0
novicheG Explorer

novicheG

Posted
  • Author
Posted

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
novicheG Explorer

novicheG

Posted
  • Author
Posted

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

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 - никакой функциональной роли не играет! вставил его просто для наглядности!)

Link to comment
Share on other sites
  • 0
novicheG Explorer

novicheG

Posted
  • Author
Posted

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

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

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

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

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

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

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

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

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted (edited)

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

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

Edited by SelenIT
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

1) И вправду незачем :) не посмотрел, что у враппера overflow:hidden эту задачу уже решает :)

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

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

Link to comment
Share on other sites
  • 0
novicheG Explorer

novicheG

Posted
  • Author
Posted

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

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

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

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

Link to comment
Share on other sites
  • 0
novicheG Explorer

novicheG

Posted
  • Author
Posted (edited)

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

UPD

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

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

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

4c232126a8cd.gif

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

ce0f86b637c6.gif

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

60eaf95b520e.gif

Edited by novicheG
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

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • 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