Ничего не помогает. Как прижать div к низу родителя?

Question

[Артём Цымбалюк]

Доброго времени суток.
Есть следующий код:

<section class="trainers">
<div class="maria"><div class="foto"></div></div>
<div class="oleg"><div class="foto"></div></div>
</section>

.maria
	.foto
		width: 510px
		height: 794px
		background: url(../img/maria.png) no-repeat
		float: right

	.foto:hover
		background: url(../img/mariahover.png) no-repeat

.oleg
	.foto
		width: 510px
		height: 794px
		background: url(../img/oleg.png) no-repeat
		float: left

	.foto:hover
		background: url(../img/oleghover.png) no-repeat

Суть простая, нужно эти 2 фотографии прижать к низу секции.
CSS код секции

.trainers
	min-height: 100vh
	height: 100vh
	background: url(../img/bg-trainers.jpg)
	background-size: cover
	background-position: center
	position: relative

Comments

[Артём Цымбалюк]

Можно даже путем JS , если это поможет

Answer 1

[Владимир]

У вас у родителя есть position : relative, отлично, тогда можно задать вашим дивам position : absolute; bottom : 0px; по идее должно вам помочь.

Comments

[Артём Цымбалюк]

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

[Артём Цымбалюк]

то есть к " < header > "

[Владимир]

Ну тогда задай ещё своим maria и oleg тоже position : relative.

[Артём Цымбалюк]

Serj-One Владимир prntscr.com/abui3m Так, всё по инструкции, если absolut задам, полезут вообще на < header >

[Владимир]

Чувак говорю добавь position : relative дивам с классом maria и oleg а там оставь absolute

[Артём Цымбалюк]

Владимир а там , это где ?

[Артём Цымбалюк]

Владимир ааа. догнал. погоди опробую)

[Артём Цымбалюк]

Владимир prntscr.com/abul28 вот так ?

[Артём Цымбалюк]

Вообщем, всё равно не получается. Задал статичную высоту родителю, а фотографиям маргин, ибо катись оно конём

Answer 2

[Михаил Паутов]

Могу подсказать два способа 1ый через position;

.maria
  .foto
    width: 510px
    height: 794px
    background: url(../img/maria.png) no-repeat
    float: right
    position:absolute
    bottom:0px
    right:0px

  .foto:hover
    background: url(../img/mariahover.png) no-repeat

.oleg
  .foto
    width: 510px
    height: 794px
    background: url(../img/oleg.png) no-repeat
    float: left
    position:absolute
    bottom:0px
    left:0px

  .foto:hover
    background: url(../img/oleghover.png) no-repeat

.trainers
  min-height: 100vh
  height: 100vh
  background: url(../img/bg-trainers.jpg)
  background-size: cover
  background-position: center
  position: relative

Второй он не кросс платформенный.
Воспользуйтесь flex
FLEX
Тут краткий обзор flexa

Comments

[Владимир]

Миш ну хорош, впервые раз ответ не дописал, теперь ссылки нет, че такое?

[Владимир]

Во теперь норм

[Артём Цымбалюк]

Не помогает позиция абсолютная, а ботом 0. Вместо родительского дива, они встают на первый и прижимаются к низу, у него