Выровняйте div по нижней части его родительского div, сохраняя родительскую высоту 100VH и не используя фиксированное позиционирование

Question

Вот моя скрипка: https://jsfiddle.net/cwverdkt/.

Я стараюсь держать "привет" в центре, а фото собаки внизу слева. Мне нужно, чтобы основной div был 100vh и не относительный, потому что я собираюсь реализовать прокрутку параллакса, и у меня не может быть собаки всегда внизу.

Я пробовал:

#photo{
  bottom: 0;
}

и

#photo{
  display: inline-block;
  align-self: flex-end;
}

и

.bottom-aligner {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
}

<div class="bottom-aligner">
  <div id="dog">
    <img src="http://i.imgur.com/FleWUfc.png" />
  </div>
</div>

Последний вид работ, за исключением того, что он обрезал фотографию собаки.

Вот скриншот того, как я хочу, чтобы он выглядел следующим образом:

Answer 1

Только что добавлено CSS ниже. Демо попробуйте

#slide3{display:table}
#photo {
    width: 100%;
    bottom: 0;
    height: 100vh;
    vertical-align: bottom;
    display: table-cell;
}

Answer 2

Сделать изображение собаки в качестве фона элемента #photo для создания эффекта прокрутки параллакса.

#slide3{
background-color: #fff;
color: #333333;
overflow: hidden;
margin: 0 auto;
background-size: cover;
height: 100vh;
}

#hello{
 display: table;
 margin: 0 auto;
 width:100px;
}

#photo{
  height: 100%;
  overflow-y: scroll;
  background-image: url(http://i.imgur.com/FleWUfc.png);
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: center bottom;
}

<div id="slide3">
  <div id=photo>
    <img src = "https://res-2.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco/w3j8mozntf75fcku9zlr" id = "hello">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras commodo sit amet tellus ut volutpat. Vestibulum sagittis commodo ultrices. Nunc ullamcorper urna sit amet lobortis posuere. Mauris viverra, leo ut hendrerit hendrerit, turpis lorem porttitor sem, ac tincidunt eros tortor et orci. Praesent aliquam est ac nisl dignissim, quis ullamcorper augue consectetur. Vestibulum ultricies sodales dictum. Nam et tortor vel ante dapibus ornare id sit amet turpis. Pellentesque metus magna, auctor vitae egestas sed, lobortis vitae magna. Quisque at lacus leo. Donec sodales erat et semper feugiat. Donec convallis, diam nec auctor facilisis, sem leo vestibulum enim, eu gravida mi sapien in elit. Donec et magna vel est malesuada sollicitudin. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla pulvinar tempus mi, eu porttitor enim mattis eu. Interdum et malesuada fames ac ante ipsum primis in faucibus.
    </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras commodo sit amet tellus ut volutpat. Vestibulum sagittis commodo ultrices. Nunc ullamcorper urna sit amet lobortis posuere. Mauris viverra, leo ut hendrerit hendrerit, turpis lorem porttitor sem, ac tincidunt eros tortor et orci. Praesent aliquam est ac nisl dignissim, quis ullamcorper augue consectetur. Vestibulum ultricies sodales dictum. Nam et tortor vel ante dapibus ornare id sit amet turpis. Pellentesque metus magna, auctor vitae egestas sed, lobortis vitae magna. Quisque at lacus leo. Donec sodales erat et semper feugiat. Donec convallis, diam nec auctor facilisis, sem leo vestibulum enim, eu gravida mi sapien in elit. Donec et magna vel est malesuada sollicitudin. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla pulvinar tempus mi, eu porttitor enim mattis eu. Interdum et malesuada fames ac ante ipsum primis in faucibus.
    </p>
    <div id = "dog">
      <img src = "http://i.imgur.com/FleWUfc.png"/>
    </div>
  </div>
 </div>