Сложив Divs снизу вверх

Question

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

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

Answer 2

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

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

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

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

.child {
  /* whatever */
}

И это всетебе нужно.Подробнее о flexbox см. MDN .

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

Answer 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... */
}

Answer 4

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

Answer 5

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

http://jsfiddle.net/XHeZj/