html - 将元素定位在可能滚动或不滚动的父元素的底部

Question

我有一个已知高度的父 div 和一个已知高度的子 div。父 div 中也有未知数量的内容。如果内容小于父div的高度，父div不滚动，子div应该出现在div的底部。如果内容多于父 div，则父 div 应滚动，子 div 应在滚动后出现在父 div 的底部，在文档流中。

编辑:我需要支持 IE9，所以，不幸的是，flexbox 是不可能的。

下面的 fiddle 说明了我的意思:

https://jsfiddle.net/5208Lcdq/

在第一个 div 中，BOTTOM 应该在滚动后出现(就好像它被定位:静态而不是绝对)。在第二个中，它应该显示为绝对定位。

有没有一种方法可以在没有 javascript 的情况下检测父级的滚动高度？

.outer {
  position: relative;
  width:100px;
  height:100px;
  overflow-y:auto;
  margin: 50px;
  border: 1px solid black;
}

.bottom {
    margin-top: 10px;
    position: absolute;
    bottom: 0;
  }

<div class="outer">
<div class="content">
This is some content
This is some content
This is some content
This is some content
This is some content
This is some content

</div>
<div class="bottom">
BOTTOM
</div>
</div>

<div class="outer">
<div class="content">
This is some content
</div>
<div class="bottom">
BOTTOM
</div>
</div>

Answer 1

我相信你要的是这个:https://jsfiddle.net/5208Lcdq/6/

代码:

<div class="outer">
  <div class="content">
    This is some content
    This is some content
    This is some content
    This is some content
    This is some content
    This is some content
  </div>
  <div class="bottom">
    BOTTOM
  </div>
</div>

<div class="outer">
  <div class="content">
    This is some content
  </div>
  <div class="bottom">
    BOTTOM
  </div>
</div>

CSS

.outer {
  position: relative;
  width:100px;
  height:100px;
  overflow-y:auto;
  margin: 50px;
  border: 1px solid black;
}

.bottom {
    margin-top: 10px;
    position: relative;
    bottom: 0;
  }
 .content{
     min-height: 70px;
  }