Укладання Divs від низу до верху


139

При додаванні divs до a 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?

Відповіді:


46

Усі відповіді пропускають точку прокрутки вашого запитання. І це важко. Якщо вам це потрібно лише для роботи в сучасних браузерах та 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

@javius ​​- На ньому відображатиметься відключена смуга прокрутки, оскільки position:absoluteдитина не впливає на висоту контейнера .
gblazex

добре ваше рішення не відображає жодних
смуг

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

1
Дякуємо за вашу відповідь, обгортка виконує цю роботу добре.
Wulf

38

Більш сучасною відповіддю на це було б скористатися flexbox.

Як і в багатьох інших сучасних функціях, вони не працюватимуть у застарілих браузерах , тому, якщо ви не готові вимкнути підтримку браузерів з епохи IE8-9, вам потрібно буде шукати інший метод.

Ось як це робиться:

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

.child {
  /* whatever */
}

І це все, що вам потрібно. Для подальшого читання flexboxдив. MDN .

Ось приклад цього з деякими базовими стилями: http://codepen.io/Mest/pen/Gnbfk


Дивовижна відповідь, дуже дякую! Ще не чули про флексокси, це звучить дуже цікаво!
Вульф

4
Це скасовує порядок, але не тягне їх до низу батьків.
Едвард Андерсон

@nilbus Ви б хотіли допрацювати? Мої попередні тести і навіть приклади, що додаються, напевно, здається, тягнуть вниз до низу батьківського елемента.
Нілс Касперссон,

Здається, я помиляюся. Можливо, є конфліктний стиль, який заважав мені працювати на мене. Дякую!
Едвард Андерсон,

Я знайшов у прикладі коду, є .parent {position: fix;}, що робить цю роботу. Крім того, прокрутка в демонстрації не працює на Chome, вам потрібні такі: .parant {-webkit-flex: 1 1 auto; overflow-y: авто; мінімальна висота: 0px;} та зніміть фіксовану позицію
Ng Sek Long

1

Ми можемо просто використовувати перетворення CSS для архівування цього.

Я створив для нього кодек. https://codepen.io/king-dev/pen/PoPgXEg

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

Ідея полягає в тому, щоб спочатку перевернути корінь по горизонталі, а потім знову повернути прямі діти.

ПРИМІТКА: вищевказаний метод також змінює порядок дівок. Якщо ви просто хочете розмістити їх, щоб почати знизу, ви можете зробити наступне.

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

0

Продовжуй ...

Я хотів зробити те ж саме в #header діві, тому я створив порожній дів, який називається, #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 діва , щоб штовхнути інших. Користуватися інструментами для розробників / інспекторів веб-переглядача досить просто, щоб зробити це правильно.

#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додається. Тому я ставлю це тут, якщо хтось насправді хоче більш статичного рішення. Іншими словами: я вважаю, що нульовий голос був би більш відповідним, ніж негативний.
veganaiZe

Дякуємо, що знайшли час та надали відповідь із статичним вмістом. Я поважаю це. Питання чітко показує динамічний контент, Child Div #де дочірні діви збільшуються, а коли збільшуються на певну висоту, слід показувати прокрутку. тому ця відповідь не забезпечує вирішення актуального питання.
Садід Алі

0

Я хочу, щоб ця робота працювала з завантажувальним завантаженням, як програма для чату, де повідомлення проходить знизу вгору

прочитавши речі, я знайшов це

У мене є зовнішній дів припустимо клас .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.