Html 将一个元素放置在父元素的底部，可以滚动，也可以不滚动

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

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

下面的小提琴说明了我的意思：

在第一个div中，底部应该在滚动后显示（就像它被定位一样：static而不是absolute）。在第二种情况下，它应该像它一样出现，绝对定位

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

.outer{
位置：相对位置；
宽度：100px；
高度：100px；
溢出y：自动；
利润率：50像素；
边框：1px纯黑；
}
.底部{
边缘顶部：10px；
位置：绝对位置；
底部：0；
}

这是一些内容
这是一些内容
这是一些内容
这是一些内容
这是一些内容
这是一些内容
底部
这是一些内容
底部

我相信您的要求是：

代码：

---

我相信你的要求是：

代码：

---

如果我了解以下情况，flex可能是一种可能性：

.outer{
高度：100px；
宽度：11em；
溢出：自动；
显示：内联flex；
弯曲方向：立柱；
溢出y：自动；
利润率：20px；
边框：1px纯黑；
}
.内容{
弹性：1；
}
比斯先生{
高度：150像素；
}

这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容
底部
这是一些内容
底部
不管什么高度不管什么高度不管什么高度不管什么高度不管什么高度不管什么高度这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容
底部
这是一些内容
底部

如果我理解以下内容，flex可能是一种可能性：

.outer{
高度：100px；
宽度：11em；
溢出：自动；
显示：内联flex；
弯曲方向：立柱；
溢出y：自动；
利润率：20px；
边框：1px纯黑；
}
.内容{
弹性：1；
}
比斯先生{
高度：150像素；
}

这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容
底部
这是一些内容
底部
不管什么高度不管什么高度不管什么高度不管什么高度不管什么高度不管什么高度这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容
底部
这是一些内容
底部

问题是，第二个div的底部和底部之间有空格。这是我希望第一个div看起来的样子，但第二个div仍然需要看起来像我手中的小提琴一样。@ColinDeClue你知道第二个div什么时候会像这样吗？你能再给它上一节课吗？就是这样，我做到了。谢谢（这两种方法都是同一个div，所以我不能给它一个额外的类，作为旁白）问题是第二个div的底部和底部之间有空间。这是我想要第一个div看起来的样子，但第二个div需要看起来像我小提琴里的样子，“仍然如此。”科林德克鲁你知道第二部什么时候会是这样吗？你能再给它上一节课吗？就是这样，我做到了。谢谢（无论哪种方式，它都是同一个div，所以我不能给它增加一个类，作为旁白）

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

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