html - 将 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>

最后一种工作，除了它裁剪了狗的照片。

这是我想让它看起来像的屏幕截图：

标签： htmlcss

Answer 1

刚刚添加了下面提到的 CSS。演示试试这个

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