垂直对齐底部并自动溢出其他 div

Question

我想要这个

<style>
  .mycontent {
    border: 1px solid;
    width: 300px;
    margin: auto;
    height: 250px;
    display: block;
  }

  .top {
    overflow-x: hidden;
    overflow-y: auto;
    margin: 10px;
    border: 2px solid;
    height: 210px; /* must remove this */
  }

  .bottom {
    border: 1px solid red;
  }
</style>

<div class="mycontent">
  <div class="top">
    <br>content
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br>content
  </div>

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

bottom class 总是在那个位置并且 top class 达到可用的最大高度然后得到 overflow

问题是我现在正在使用

height:210px;

顶部 class 但底部的高度并不总是相同，然后我必须从 css

中删除该行

Answer 1

使用弹性框：

* {
  box-sizing:border-box;
}
.mycontent {
  border: 1px solid;
  width: 300px;
  margin: auto;
  height: 250px;
  display: flex;
  flex-direction:column;
}

.top {
  overflow-x: hidden;
  overflow-y: auto;
  margin: 10px;
  border: 2px solid;
}

.bottom {
  margin-top:auto; /*to make it stick at bottom*/
  border: 1px solid red;
}

<div class="mycontent">
  <div class="top">
    <br>content
    <br>content
    <br>content
    <br>content
  </div>

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

<div class="mycontent">
  <div class="top">
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
  </div>

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

垂直对齐底部并自动溢出其他 div

vertical align bottom and auto overflow other div

css

vertical-alignment