Как прижать div к низу родителя?

Question

[Niko True]

Суть, что внутри блока контента, размер которого динамический, необходимо растянуть картинку, которая будет подстраиваться по высоте, а края будут отрезаться. А под этой картинкой еще один div. Как можно этот нижний div прижать и растянуть картинку, что бы она занимала всю ширину?

Answer 1

[Юрий Лобанов]

codepen.io/iiil/pen/hrGHk

Comments

[Niko True]

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

[Юрий Лобанов]

@buloshnik при всем уважении, Вы несете какую-то чушь ) Ну вот как может блок быть одновременно и с контентом, и без него? Если в блоке есть контент — он его растягивает, если нет, то он будет нулевой высоты.
Вы пишете, что размер блока динамичный — откуда берется высота блока тогда, если там нет контента? Значит она задана жестко?
Нарисуйте картинку того, что хотите, с обозначением крайних положений.

[Niko True]

@iiil, прежде чем говорить чушь или нет - почитал бы нормально. Понимаю, что объясняю на пальцах. Контент - это блок где у меня что то размещается, она находится между шапкой и футером. А вот внутри этого блока "контент" необходимо вставить снизу высотой 100px полоску со списком из col-sm. А во все оставшееся место сверху развернуть картинку. Причем не растягивать, что бы не терялось качество.

[Niko True]

вот картинку набросал https://db.tt/SFZxhJQB

[Евгений Петров]

@iiil предлагаю забить. В хорошем смысле этого слова. Сломаешь весь мозг и всё равно не поймёшь до конца. Там же бутсрап, а ты тут со своими размышлениями:)

[Юрий Лобанов]

@buloshnik понятнее мне не стало. Я примерно представляю, что Вы хотите сделать, но делаете Вы это через одно место.
Почему Вам не прижать меню прямо к футеру? Точнее сделать его в одно целое с футером, если оно у Вас фиксировано точно также, как и футер?
Футер и хедер имеют высоту фиксированную или нет?

P. S. Не имейте моды переходить на ты, когда к Вам на Вы обращаются.

[Юрий Лобанов]

@Petroveg ну как минимум до завтра я точно отложу )

[Niko True]

@iiil извините, не думал, что Вас это заденет. А вот прижать к футеру хорошая идея, об этом я не подумал...может еще примером поделитесь?

[Юрий Лобанов]

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

[Niko True]

@iiil сделал как Вы сказали, но теперь следующая проблема - как мне растянуть картинку на все свободное место?

[Юрий Лобанов]

@buloshnik я вот выше Вам задал вопрос. Ответьте на него для начала.

[Юрий Лобанов]

@buloshnik и сделайте пример того, что уже получилось, на codepen.io, чтобы мне не делать двойную работу.

[Niko True]

@iiil запихнул я все так как мне надо. Как Вы и сказали - вынес панель из блока "контент" и засунул его к футеру. Теперь на весь контент нужно растянуть картинку6 что бы по ширине она была 100%, а в высоту по-пропорциям

[Юрий Лобанов]

@buloshnik я Вас спрашивал:
Футер и хедер имеют высоту фиксированную или нет?

[Niko True]

@iiil да фиксированную, я разобрался со всем, то что Вы посоветовали - достаточно для решения проблемы. В остальном была виновата моя невнимательность

Answer 2

[Deerenaros]

Может стоит немного по-другому?

Answer 3

[Itvanya]

Несовсем понятно из контекста, но : div прижми позиционированием, а картинке дай max-width:100% - тогда она будет тянуться

Comments

[Niko True]

позиционированием проблемно, так как у использую bootstrap и то что я хочу поместить вниз дива - это col-sm, которые у меня съезжаются

Answer 4

[Александр Зачиналов]

Так? jsfiddle.net/or7jk24u/1

Comments

[Niko True]

высоту как я понимаю я не могу задавать так как у меня контент не на 100% растянут...у меня шапка и футер фиксированые, и если я буду задавать 100% для контента - то будет появляться прокрутка на странице

[Александр Зачиналов]

размеры для main я поставил только для примера, вы можете использовать свои как в пкс, так и в %. Внутри все подстраивается само под размеры main, как вы и просили

[Niko True]

@SanDiesel я имел ввиду что у вас для img указаны минимальная высота 100%, у меня она неизвестна

[Александр Зачиналов]

ну поставь и для img свойство position:absolute. Высота картинки в 100% это значит что она подгоняется по высоте родительского div, тоже как вы и просили. А вообще нарисуйте хоть схему чтоли, хоть в paint, чтобы понять чего вам надо. Я в угадайку не хочу играть

[Александр Зачиналов]

Можешь убрать height для картинки, тогда она и по высоте будет резаться

[Niko True]

@SanDiesel https://db.tt/SFZxhJQB

[Александр Зачиналов]

ну и ничего не изменило это) Короче смысл из этого всего. Хочешь что-то прижать, пиши ему position:absolute; bottom:0; width:100%. При этом у родителя должно быть position:relative

[Niko True]

@SanDiesel да не могу я так писать, потому что у меня едут стили бутстрапа!

Answer 5

[frees2]

В проектах можно замучится с дивами, надоедает высматривать, если легкий способ и давний работает как часы

$(document).ready(function() {var bodyHeight = $("body").height();	var vwptHeight = $(window).height();
if (vwptHeight > bodyHeight) {
	$("#player").css({'bottom':'8%', 'position':'fixed'});}	});

<div id='player'></div>

#player { display: block; height: 35%; width: 35%;	  z-index: 2; }

Comments

[Евгений Петров]

$('body').height()

Фффууу...

<div id='player'></div>
...
#player { display: block;}

Да ладно:)

[Niko True]

не очень хотелось бы для таких целей использовать js, так как все решаемо css

[Александр Зачиналов]

@Petroveg зачет)