Укладка разделов от нижнего к верхнему

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

Ответы

Ответ 1

Во всех ответах пропустите прокрутку. И это тяжело. Если вам это нужно только для современных браузеров и 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%;
}

Ответ 2

Более современный ответ на этот вопрос заключался бы в использовании flexbox.

Поддержка flexbox не очень хороша на момент написания, поэтому, если вы не готовы отказаться от поддержки IE8 и IE9 вам нужно будет искать другой метод.

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

.parent {
  display: flex;
  flex-direction: column-reverse;
}

.child {
  /* whatever */
}

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

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

Ответ 3

Keepin 'it oldskool...

Я хотел сделать то же самое в #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... */
}

Ответ 5

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