當附加div到一個固定高度的div時，子div將從上到下出現，粘在頂部邊界。

┌─────────────────────────┐
│ Child Div 1             │
│ Child Div 2             │
│                         │
│                         │
│                         │
└─────────────────────────┘

我現在試著像這樣從下到上顯示它們(貼著底部邊框):

┌─────────────────────────┐
│                         │
│                         │
│                         │
│ Child Div 1             │
│ Child Div 2             │
└─────────────────────────┘
┌─────────────────────────┐
│                         │
│                         │
│ Child Div 1             │
│ Child Div 2             │
│ Child Div 3             │
└─────────────────────────┘
┌───────────────────────┬─┐
│ Child Div 2           │▲│
│ Child Div 3           │ │
│ Child Div 4           │ │
│ Child Div 5           │█│
│ Child Div 6           │▼│
└───────────────────────┴─┘

等等...我希望你明白我的意思。

用CSS(類似于vertical-align: bottom)可以簡單地做到這一點嗎？還是要我用JavaScript一起黑東西？

對此，更現代的答案是使用flexbox。

與許多其他現代功能一樣，它們不能在傳統瀏覽器中工作，所以除非你準備放棄對IE8-9時代瀏覽器的支持，否則你需要尋找另一種方法。

這是如何做到的:

.parent {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.child {
  /* whatever */
}

這就是你所需要的。有關flexbox的更多信息，請參見MDN。

這里有一個基本造型的例子:http://codepen.io/Mest/pen/Gnbfk

所有的答案都錯過了你問題的滾動條點。這是一個艱難的決定。如果你只需要這個為現代瀏覽器和IE 8+工作，你可以使用表格定位，垂直對齊:底部和最大高度。請參閱MDN了解具體的瀏覽器兼容性。

演示(垂直對齊)

.wrapper {
  display: table-cell;
  vertical-align: bottom;
  height: 200px;
}
.content {
  max-height: 200px;
  overflow: auto;
}

超文本標記語言

<div class="wrapper">
  <div class="content">
     <div>row 1</div>
     <div>row 2</div>
     <div>row 3</div>  
  </div>
</div>

除此之外，我認為僅用CSS是不可能的。你可以用position:absolute讓元素粘在容器的底部，但是這會把它們從流中去掉。因此，它們不會拉伸并使容器可滾動。

演示(絕對位置)

.wrapper {
  position: relative;
  height: 200px;
}
.content {
  position: absolute;
  bottom: 0;
  width: 100%;
}

我希望這項工作與bootstarp像聊天應用程序的消息流自下而上

在閱讀材料后，我發現了這個

我有一個外部div假設類。奧特迪夫 然后是UI，列表

.outerDiv {
    height: 361px;
    position: relative;
}
ui.msg-content{
    width: 100%;
    bottom: 0;
    position: absolute;
    max-height: 98%;
    overflow-y: auto;
}

我們可以簡單地使用CSS轉換來存檔。

我為它創造了一個密碼筆。 https://codepen.io/king-dev/pen/PoPgXEg

.root {
  transform: scaleY(-1);
}
.root > div {
  transform: scaleY(-1);
}

想法是首先垂直翻轉根，然后再次翻轉直接子div。

注意:上述方法也顛倒了div的順序。 如果你只是想把他們從底部開始，你可以這樣做。

.root {
  display: flex;
  flex-direction: column;
  height: 100px;
  overflow-y: auto;
}
.root > div:first-child {
  margin-top: auto;
}

我想在#header div中做同樣的事情，所以我創建了一個名為#header的空div，并將其放在堆棧的頂部(在#header的內部):

<div id="header">
    <div id="headspace"></div>
    <div id="one">some content</div>
    <div id="two">other content</div>
    <div id="three">more content</div>
</div> <!-- header -->

然后我用一個百分比，不可見的#headspace div的高度，把其他的向下推。使用瀏覽器的開發人員/檢查員工具很容易做到這一點。

#header {
    width: 100%;
    height: 10rem;
    overflow: auto;
}

#headspace {
    width: 100%;
    height: 42%;    /* Experiment with Inspect (Element) tool */
}

#one, #two, #three {
    /* Insert appropriate dimensions for others... */
}

顯示:如果包裝器是一個flex項目，可能有流體高度(如我的例子)，則table-cell不起作用。這就是我支持flexbox方法的原因。但是，如果您想進一步發展這個想法，節省一行代碼，您也可以利用grid編寫類似這樣的代碼:

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.big-wrapper {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex: auto;
  height: 0;
  display: grid; <!-- the important part -->
  align-content: end; <!-- the important part -->
}

.content {
  overflow-y: auto;
}

超文本標記語言

<div class="big-wrapper">
  <div class="wrapper">
    <div class="content">
      <div>row 1</div>
      <div>row 2</div>
      <div>row 3</div>  
    </div>
  </div>
</div>

當你使用position: absolute時，這很簡單。

http://jsfiddle.net/XHeZj/

感謝貢獻一個堆棧溢出的答案！

請務必回答問題。提供詳細信息并分享您的研究！但是要避免…

尋求幫助、澄清或回應其他答案。根據意見發表聲明；用參考資料或個人經歷來支持他們。要了解更多，請查看我們關于撰寫精彩答案的提示。