Растянуть Div с float вертикально по высоте

[ProJey]

Добрый день, уважаемые форумчане, ни как не могу решить проблему с ростягиванием DIV'а которому задано свойство флоат.

Хочу понять именно механику процесса.

 

Необходимо чтобы 2 колонки всегда были в низу экрана, даже если контента мало.

 

Пожалуйста помогите разобраться!

Вот код

Edited December 13, 2015 by ProJey

[Vlad02]

Если правильно понял, как-то так http://jsfiddle.net/00f4k26w/2/

[ProJey]

Vlad02, спасибо за отзывчивость, не совсем то что хотел, но вроде разобрался!

[Launder]

http://jsfiddle.net/Launder/e951gm6t/3/

 

Наверное, как-то так...

[Launder]

Для нерушимого жёлтого фона можно использовать две заглушки:

первая она более топорная, и

вторая она посложнее, но наверное, концептуально чуть более правильная...

[ProJey]

Launder, спасибо за коментарии. То что я и хотел сначала, уже сделал столбец фоном того же цвета . Думаю как ты показал гораздо лучше будет!

Launder, подскажи пожалуйста от куда берется нижний маргин у футера, там где ты -50 написал ?

Edited December 18, 2015 by ProJey

[ProJey]

Возникло еще парочка вопросов:

1. зачем контейнер #pusher?

2. свойство relative вырывает content из потока и поэтому контейнер как бы находится под хедером?

Edited December 18, 2015 by ProJey

[ProJey]

  On 12/18/2015 at 12:36 AM, Launder said:

Для нерушимого жёлтого фона можно использовать две заглушки:

первая она более топорная, и

вторая она посложнее, но наверное, концептуально чуть более правильная...

 По первому примеру, я так понимаю что в #tint вместо fixed можно использовать и absolute?

[Launder]

Вот если по первому примеру, где используется подкладка tint, с твоим кодом,
получилось так:

http://jsfiddle.net/Launder/o4g74cqj
http://jsfiddle.net/Launder/o4g74cqj/1/- это через calc у высоты получилось убрать лишние 20 пикселов, которые, как я понимаю, добавляет padding, прибавляя с верху и с низу по 10 пикселов. Можно таким же образом посчитать сколько места занимает шапка, главное меню и все отступы, по моим прикидкам получилось где-то 130-140 пикселей, с паддингом 150-160 пикселей и задать соответственно минимальную высоту, тогда и на большой страничке конец блока навигации будет как раз растягиваться ровно до самого низа.

 

  On 12/18/2015 at 4:20 PM, ProJey said:

Launder, спасибо за коментарии. То что я и хотел сначала, уже сделал столбец фоном того же цвета . Думаю как ты показал гораздо лучше будет!

Launder, подскажи пожалуйста от куда берется нижний маргин у футера, там где ты -50 написал ?

Идея такая, берём пустой блок, размерами равный шапке и добавляем его вверху содержимого. Итого у нас шапка, пустое содержимое равное шапке, и содержимое, материалы сайта. А далее, пустое содержимое прячем под шапку, в результате чего у нас низ блока получается как раз внизу странички.
Для этого мы для неё min-height: 100%, а для того, чтоб она понимала откуда брать эти 100%, то для родительского блока body мы тоже размер поставили 100%, а для него, в свою очередь для html задали тоже 100%. Итого хтмль берёт размер от размера странички, а дальше 100% от хтмль идёт для body ну и так далее до нашего блока.
Поскольку, по умолчанию, сверху показывается то, что находится в коде ниже, то для того, чтоб шапка была вверху я ей добавил position: relative. Если бы мы проделывали подобную операцию для подвала, то это было бы не обязательно.

 

  On 12/18/2015 at 4:56 PM, ProJey said:

По первому примеру, я так понимаю что в #tint вместо fixed можно использовать и absolute?

Можно, но тогда жёлтый фон будет прокручиваться. А Вы попробуйте в песочнице поэкспериментировать.

 

  On 12/18/2015 at 4:40 PM, ProJey said:

зачем контейнер #pusher?

Это и есть тот самый пустой блок.

 

Да, я добавил отмену обтекания и для левого блока и немного изменил код в псевдоэлементе, впрочем, последнее, возможно и не обязательно, если для таблицы задать height: 0. В противном случае таблица, вероятно в сочетании с min-height самого элемента, может растягивать блок.

Edited December 18, 2015 by Launder

[Launder]

А вот Вам вариант с пушером:

 

http://jsfiddle.net/Launder/o4g74cqj/2/

 

Там два блока с классом пушер, они вставлены в начала левого и правого блока.

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

ЗЫ: ну и, наверное, стоит сказать, что в самой теме задано, что речь идёт о плавающих элементах, а для подобной задачи можно применять разные подходы.

UPD: Когда мы добавляем отрицательный отступ плавающему элементу, он располагается поверх фона блочных элементов и под строчными. Отмечу в обычном варианте он строчные элементы сдвигает (чтоб они его обтекали).

Edited January 1, 2016 by Launder

[Launder]

http://jsfiddle.net/Launder/00f4k26w/4/

 

А вот способ растянуть колонки с минимальным изменением исходного кода.

1. добавил html, body{height: 100%}

2. значение overflow: auto для основного контейнера (вместо hidden); там же поменял height c auto на 100%.

3. Добавил к левой колонке свойство min-height: 100%.

Вроде всё.

ЗЫ: это не отменяет вышесказанного, что минимальную высоту лучше назначить как для левой, так и для правой колонки, также добавить и для левой колонки псевдоэлемент для отмены обтекания, да и сам псевдоэлемент, по-моему лучше использовать такой, какой я указал в своём примере (блочный, невидимый с нулевой высотой), ну с высотой плавающих блоков также можно проделать некоторые манипуляции с помощью calc.

Edited December 18, 2015 by Launder

[ProJey]

Спасибо! Очень помогли!