Укладка Div снизу вверх

При добавлении divs к a 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?

Во всех ответах отсутствует точка полосы прокрутки вашего вопроса. И это непросто. Если вам это нужно только для работы с современными браузерами и IE 8+, вы можете использовать позиционирование таблиц vertical-align:bottomи max-height. См. MDN для конкретной совместимости с браузером.

Демо (выравнивание по вертикали)

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

html

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

Более современный ответ на этот вопрос - использовать flexbox.

Как и многие другие современные функции, они не будут работать в устаревших браузерах , поэтому, если вы не готовы отказаться от поддержки браузеров эпохи IE8-9, вам придется искать другой метод.

Вот как это делается:

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

.child {
  /* whatever */
}

И это все, что вам нужно. Для дальнейшего чтения flexboxсм. MDN .

Вот пример этого с некоторыми базовыми стилями: http://codepen.io/Mest/pen/Gnbfk

Мы можем просто использовать преобразование 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, поэтому я создал пустой div с именем #headspaceи поместил его на вершину стека (внутри #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... */
}

Я хочу, чтобы эта работа работала с bootstarp, как приложение для чата, где поток сообщений снизу вверх

прочитав материал, я нашел это

У меня есть внешний div, предполагающий класс .outerDiv, а затем UI, список

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

Это просто, когда вы используете position: absolute.

http://jsfiddle.net/XHeZj/

<div style="height: 500px;">
    <div style="height: 20px; position: absolute; bottom: 120px;">Child Div 1</div>
    <div style="height: 20px; position: absolute; bottom: 100px;">Child Div 2</div>
    <div style="height: 20px; position: absolute; bottom: 80px;">Child Div 3</div>
    <div style="height: 20px; position: absolute; bottom: 60px;">Child Div 4</div>
    <div style="height: 20px; position: absolute; bottom: 40px;">Child Div 5</div>
</div>