将元素定位在可以滚动也可以不滚动的父元素的底部

Question

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

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

下面的小提琴展示了我的意思：

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;
  }

Answer 2

flex可能是一种可能性，如果我理解：

.outer {
  height: 100px;
  width: 11em;
  overflow: auto;
  display: inline-flex;
  flex-direction: column;
  overflow-y: auto;
  margin: 20px;
  border: 1px solid black;
}
.content {
  flex: 1;
}
.bis {
  height:150px;
  }

<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>
<div class="outer bis">
  <div class="content">
    No matter what height No matter what height No matter what height No matter what height No matter what height 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 bis">
  <div class="content">
    This is some content
  </div>
  <div class="bottom">
    BOTTOM
  </div>
</div>