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

Question

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

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

749 5

html css alignment vertical-alignment scrollbar

5 ответов:

Comments

Ничего не найдено.

galambalazs · Accepted Answer · 2016-02-09 12:30:36

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

Nils Kaspersson · Accepted Answer · 2018-03-23 10:56:14

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

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

вот как это делается:
.parent {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.child {
  /* whatever */
}
и это все, что вам нужно. Для дальнейшего чтения на flexbox см. MDN.

вот пример некоторые основные стили:http://codepen.io/Mest/pen/Gnbfk

veganaiZe · Accepted Answer · 2017-09-22 01:54:20

держать его олдскул...

Я хотел сделать то же самое в #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> 
тогда я использовал процент, для высоты невидимого #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... */
}

Chris · Accepted Answer · 2011-06-19 13:41:46

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

http://jsfiddle.net/XHeZj/

Matt Healy · Accepted Answer · 2011-06-19 13:47:31

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