Pertanyaan Bagaimana cara menyesuaikan konten div ke bagian bawah?


Katakanlah saya memiliki kode CSS dan HTML berikut:

#header {
  height: 150px;
}
<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

Bagian header adalah tinggi tetap, tetapi konten header dapat berubah. Saya ingin konten dari header untuk secara vertikal sejajar dengan bagian bawah bagian header, sehingga baris terakhir dari teks "stick" ke bagian bawah bagian header.

Jadi jika hanya ada satu baris teks maka akan seperti:

-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------

Dan jika ada tiga jalur:

-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------

Bagaimana ini bisa dilakukan dalam CSS?


955
2018-02-25 13:15


asal


Jawaban:


Posisi relatif + absolut adalah taruhan terbaik Anda:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}
<div id="header">
  <h1>Title</h1>
  <div id="header-content">Some content</div>
</div>

Tetapi Anda mungkin mengalami masalah dengan itu. Ketika saya mencobanya, saya memiliki masalah dengan menu dropdown yang muncul di bawah konten. Hanya saja tidak cantik.

Sejujurnya, untuk masalah pemusatan vertikal dan, yah, masalah perataan vertikal apa pun dengan item bukan tinggi tetap, lebih mudah hanya menggunakan tabel.

Contoh: Bisakah Anda melakukan tata letak HTML ini tanpa menggunakan tabel?


1134
2018-02-25 13:20



Gunakan penempatan CSS.

/* creates a new stacking context on the header */
#header {
  position: relative;
}

/* positions header-content at the bottom of header's context */
#header-content {
  position: absolute;
  bottom: 0;
}

Sebagai cletus dicatat, Anda perlu mengidentifikasi isi-header untuk membuat ini bekerja.

<span id="header-content">some header content</span> 

<div style="height:100%; position:relative;">                                              
    <div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div> 

134
2018-02-25 13:18



Saya menggunakan properti ini dan itu berhasil!

#header {
  display: table-cell;
  vertical-align: bottom;
}

100
2018-04-25 09:43



Jika Anda tidak khawatir tentang browser warisan menggunakan flexbox.

Elemen induk membutuhkan jenis tampilan yang disetel agar fleksibel

div.parent {
  display: flex;
  height: 100%;
}

Kemudian Anda mengatur align-self elemen anak ke flex-end.

span.child {
  display: inline-block;
  align-self: flex-end;
}

Inilah sumber yang saya gunakan untuk belajar: http://css-tricks.com/snippets/css/a-guide-to-flexbox/


76
2017-08-25 20:46



Setelah berjuang dengan masalah yang sama ini untuk beberapa waktu, akhirnya saya menemukan solusi yang memenuhi semua persyaratan saya:

  • Tidak mengharuskan saya mengetahui ketinggian wadahnya.
  • Tidak seperti solusi relatif + absolut, konten tidak mengapung di lapisannya sendiri (yaitu, ia menyematkan normalnya di dalam div penampung).
  • Berfungsi di seluruh browser (IE8 +).
  • Mudah diimplementasikan.

Solusinya hanya membutuhkan satu <div>, yang saya sebut "aligner":

CSS

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

html

<div class="bottom_aligner"></div>
... Your content here ...

Trik ini berfungsi dengan membuat div yang tinggi dan kurus, yang mendorong baseline teks ke bagian bawah penampung.

Berikut ini contoh lengkap yang mencapai apa yang diminta OP. Saya telah membuat "bottom_aligner" tebal dan merah untuk tujuan demonstrasi saja.

CSS:

.outer-container {
  border: 2px solid black;
  height: 175px;
  width: 300px;
}

.top-section {
  background: lightgreen;
  height: 50%;
}

.bottom-section {
  background: lightblue;
  height: 50%;
  margin: 8px;
}

.bottom-aligner {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  width: 3px;
  background: red;
}

.bottom-content {
  display: inline-block;
}

.top-content {
  padding: 8px;
}

HTML:

<body>
  <div class="outer-container">
    <div class="top-section">
      This text
      <br> is on top.
    </div>
    <div class="bottom-section">
      <div class="bottom-aligner"></div>
      <div class="bottom-content">
        I like it here
        <br> at the bottom.
      </div>
    </div>
  </div>
</body>

Align bottom content


62
2017-07-18 17:11



Elemen inline atau inline-block dapat disejajarkan ke bagian bawah elemen level blok jika tinggi baris elemen parent / block lebih besar daripada elemen inline. *

markup:

<h1 class="alignBtm"><span>I'm at the bottom</span></h1>

css:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

* pastikan Anda berada dalam mode standar


22
2017-12-04 22:16



Cara modern untuk melakukannya akan digunakan flexbox. Lihat contoh di bawah ini. Anda bahkan tidak perlu membungkus Some text... ke dalam tag HTML apa pun, karena teks yang secara langsung terkandung dalam wadah fleksibel dibungkus dalam item flex anonim.

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}
<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

Jika hanya ada beberapa teks dan Anda ingin menyelaraskan secara vertikal ke bagian bawah wadah.

section {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  align-items: flex-end;           /* bottom of the box */
}
<section>Some text aligns to the bottom</section>


21
2017-11-24 02:53



display: flex;
align-items: flex-end;

16
2018-04-24 04:31



Jika Anda memiliki beberapa, item ketinggian dinamis, gunakan nilai tampilan CSS dari tabel dan tabel-sel:

HTML

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

CSS

html,
body {
  width: 100%;
  height: 100%;
}
.valign {
  display: table;
  width: 100%;
  height: 100%;
}
.valign > div {
  display: table-cell;
  width: 100%;
  height: 100%;
}
.valign.bottom > div {
  vertical-align: bottom;
}

Saya telah membuat demo JSBin di sini: http://jsbin.com/INOnAkuF/2/edit

Demo ini juga memiliki contoh bagaimana secara vertikal center align menggunakan teknik yang sama.


3
2018-02-20 17:55