Układanie Div od dołu do góry

Question

Układanie Div od dołu do góry

Przy dodawaniu div s do div o ustalonej wysokości, dziecięce div pojawią się od góry do dołu, przyklejając się do górnej granicy.

┌─────────────────────────┐
│ Child Div 1             │
│ Child Div 2             │
│                         │
│                         │
│                         │
└─────────────────────────┘

Staram się teraz wyświetlać je od dołu do góry w ten sposób (przyklejając się do dolnej granicy):

┌─────────────────────────┐
│                         │
│                         │
│                         │
│ 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           │▼│
└───────────────────────┴─┘

I tak dalej... Mam nadzieję, że rozumiesz, co mam na myśli.

Czy jest to po prostu wykonalne z CSS (coś w stylu vertical-align: bottom)? A może muszę coś zhakować razem z JavaScript?

120

html css alignment vertical-alignment scrollbar

Author: ROMANIA_engineer, 2011-06-19

Source

5 answers

Bardziej nowoczesną odpowiedzią na to byłoby użycie flexbox.

Podobnie jak w przypadku wielu innych nowoczesnych funkcji, nie będą działać w starszych przeglądarkach , więc jeśli nie jesteś gotowy, aby porzucić obsługę przeglądarek z ery IE8-9, musisz poszukać innej metody.

Oto Jak to się robi:

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

.child {
  /* whatever */
}

I to wszystko, czego potrzebujesz. Więcej informacji na temat flexbox, patrz MDN .

Oto przykład z podstawową stylizacją: http://codepen.io/Mest/pen/Gnbfk

29

Author: Nils Kaspersson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-23 08:56:14

Keepin' it oldskool...

Chciałem zrobić to samo w #header div więc stworzyłem pusty div o nazwie #headspace i umieściłem go na górze stosu (wewnątrz #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 -->

Wtedy użyłem procent, na wysokość niewidzialnego #headspace div , aby zepchnąć pozostałych w dół. Łatwo jest użyć narzędzi programisty / Inspektora przeglądarki, aby to osiągnąć.

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

-1

Author: veganaiZe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-21 22:54:20

Jest to proste, gdy używasz position: absolute.

Http://jsfiddle.net/XHeZj/

-3

Author: Chris,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-19 10:41:46

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

-4

Author: Matt Healy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-19 10:47:31

score 42 · Accepted Answer

Wszystkie odpowiedzi pomijają scrollbar punkt twojego pytania. I to jest trudne. Jeśli potrzebujesz tego tylko dla nowoczesnych przeglądarek i IE 8+ możesz użyć pozycjonowania tabel, vertical-align:bottom i max-height. Zobacz MDN dla konkretnej zgodności przeglądarki.

Demo (vertical-align)

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

Poza tym, myślę, że nie jest to możliwe tylko z CSS. Możesz sprawić, że elementy przykleją się do dna pojemnika za pomocą / Align = "left" / W rezultacie nie rozciągną się i nie sprawią, że kontener będzie można przewijać.

Demo (pozycja-absolutna)

.wrapper {
  position: relative;
  height: 200px;
}
.content {
  position: absolute;
  bottom: 0;
  width: 100%;
}