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


143

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

Ответы:


47

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

а overflow-y:autoдля контейнера
Venimus

@venimus - он будет отображать отключенную полосу прокрутки, потому что высота контейнера не зависит от position:absoluteдочернего элемента .
gblazex

ну, ваше решение не отображает полос прокрутки, что является частью вопроса
venimus

Я обновил ответ. Вы можете обойти проблему с полосой прокрутки в современных браузерах (IE 7+).
gblazex

1
Спасибо за ответ, обертка справляется хорошо.
Wulf

42

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

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

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

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

.child {
  /* whatever */
}

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

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


Отличный ответ, большое спасибо! Еще не слышал о флексбоксах, звучит очень интересно!
Wulf

5
Это меняет порядок, но не опускает их до низа родительского элемента.
Эдвард Андерсон

@nilbus не могли бы вы уточнить? Мои предыдущие тесты и даже прилагаемый пример, безусловно, опускают родительский элемент вниз.
Нильс Касперссон

Кажется, я ошибаюсь. Возможно, это противоречивый стиль, который мешал мне работать. Благодарность!
Эдвард Андерсон

Я обнаружил, что в примере кода есть .parent {position: fixed;}, который делает эту работу. Кроме того, прокрутка в демонстрации не работает на Chome, вам понадобятся следующие: .parant {-webkit-flex: 1 1 auto; переполнение-у: авто; min-height: 0px;} и удалите фиксированное положение
Ng Sek Long

1

Мы можем просто использовать преобразование 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;
}

0

Держи это олдскул ...

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

Это будет работать, только если у вас есть фиксированный контент. если у вас есть динамический контент и вы не знаете, сколько div будет отображаться, это не сработает.
Саджид Али

Это было маленькое решение, которое я использовал. Особого упоминания о необходимости динамического контента не было - насколько я знаю, страница полностью обновляется каждый раз, когда divдобавляется. Я поместил это здесь на тот случай, если кому-то действительно нужно более статичное решение. Другими словами: я думаю, что нулевое голосование было бы более подходящим, чем голосование против.
veganaiZe

Спасибо, что нашли время и предоставили ответ со статическим содержанием. Я уважаю это. Вопрос четко показывает динамический контент, в Child Div #котором дочерние div увеличиваются, а при увеличении на определенную высоту должна отображаться прокрутка. поэтому этот ответ не дает решения фактического вопроса.
Саджид Али

0

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

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

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

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

введите описание изображения здесь

введите описание изображения здесь



-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>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.