Bagaimana saya bisa mengirim bagian dalam <div> ke bagian bawah induknya <div>?

Div di dalam gambar div lain dan kode di bawah ini. Karena akan ada teks dan gambar div induk. Dan red div akan menjadi elemen terakhir dari parent parent.

<div style="width: 200px; height: 150px; border: 1px solid black;">
    <div style="width: 100%; height: 50px; border: 1px solid red;">
    </div>
</div>

Ini satu arah

<div style="position: relative; 
            width: 200px; 
            height: 150px; 
            border: 1px solid black;">

    <div style="position: absolute; 
                bottom: 0; 
                width: 100%; 
                height: 50px; 
                border: 1px solid red;">
    </div>
</div>

Tetapi karena div bagian dalam diposisikan mutlak, Anda harus selalu khawatir tentang konten lain di div bagian luar yang tumpang tindih (dan Anda harus selalu mengatur ketinggian tetap).

Jika Anda bisa melakukannya, lebih baik menjadikan div bagian dalam itu sebagai objek DOM terakhir di div bagian luar Anda dan mengaturnya menjadi "jelas: keduanya".

Cara flexbox.

HTML:

<div class="parent">
  <div>Images, text, buttons oh my!</div>
  <div>Bottom</div>
</div>

CSS:

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

/*  not necessary, just to visualize it */

.parent {
  height: 500px;
  border: 1px solid black;
}


.parent div {
  border: 1px solid red;
}

Edit:

Sumber - Panduan Flexbox

Dukungan browser untuk flexbox - Caniuse

Buat div luar position="relative"dan div dalam position="absolute"dan aturbottom="0" .

Berikut ini adalah trik CSS murni lainnya, yang tidak memengaruhi aliran elemen.

#parent {
  min-height: 100vh; /* set height as you need */
  display: flex;
  flex-direction: column;
  background: grey;
}
.child {
  margin-top: auto;
  background: green;
}

<div id="parent">
  <h1>Positioning with margin</h1>
  <div class="child">
    Content to the bottom
  </div>
</div>

Anda mungkin tidak ingin penentuan posisi absolut karena melanggar reflow: dalam beberapa keadaan, solusi yang lebih baik adalah membuat elemen kakek-nenek display:table;dan elemen induk display:table-cell;vertical-align:bottom;. Setelah melakukan ini, Anda harus dapat memberikan elemen anak display:inline-block;dan mereka akan mengalir secara otomatis ke bagian bawah orangtua.

Catatan: Ini sama sekali bukan cara terbaik untuk melakukannya!

Situasi : Saya harus melakukan hal yang sama hanya saja saya tidak dapat menambahkan div tambahan, oleh karena itu saya terjebak dengan apa yang saya miliki dan daripada menghapus innerHTML dan membuat yang lain melalui javascript hampir seperti 2 render saya harus memiliki konten di bawah (bilah animasi).

Solusi: Mengingat betapa lelahnya saya pada saat itu, sepertinya normal untuk memikirkan metode semacam itu, tetapi saya tahu saya memiliki elemen DOM induk yang ketinggian barnya dimulai.

Daripada bermain-main dengan javascript lebih lanjut saya menggunakan jawaban CSS ( TIDAK SELALU BAIK )! :)

-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-ms-transform:rotate(180deg);

Ya itu benar, alih-alih memposisikan DOM, saya membalikkan induknya dalam css.

Untuk skenario saya ini akan berhasil! Mungkin juga untuk orang lain! Tidak menyala! :)

Berikut adalah cara untuk menghindari div dan tabel absolut jika Anda mengetahui tinggi orangtua:

<div class="parent">
    <div class="child"> <a href="#">Home</a>
    </div>
</div>

CSS:

.parent {
    line-height:80px;
    border: 1px solid black;
}
.child {
    line-height:normal;
    display: inline-block;
    vertical-align:bottom;
    border: 1px solid red;
}

JsFiddle:

Contoh

<div style="width: 200px; height: 150px; border: 1px solid black;position:relative">
    <div style="width: 100%; height: 50px; border: 1px solid red;position:absolute;bottom:0">
    </div>
</div>