ฉันจะส่ง <div> ภายในไปยังด้านล่างของ parent <div> ได้อย่างไร

div ภายในรูปภาพ div และรหัสด้านล่างอื่น เพราะจะมีข้อความและรูปภาพของ div div และ div สีแดงจะเป็นองค์ประกอบสุดท้ายของ div parent

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

นี่เป็นวิธีหนึ่ง

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

แต่เนื่องจาก div ในอยู่ในตำแหน่งแน่นอนคุณจะต้องกังวลเกี่ยวกับเนื้อหาอื่น ๆ ใน div ด้านนอกที่ทับซ้อนกัน (และคุณจะต้องตั้งค่าความสูงคงที่เสมอ)

หากคุณสามารถทำได้ควรทำให้ div ภายในนั้นเป็นวัตถุ DOM สุดท้ายใน div ภายนอกของคุณและตั้งให้เป็น "clear: both"

วิธีที่ยืดหยุ่น

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

แก้ไข:

ที่มา - คู่มือ Flexbox

การสนับสนุนเบราว์เซอร์สำหรับ flexbox - Caniuse

ทำให้ div นอกposition="relative"และ div ภายในและการตั้งค่ามันposition="absolute"bottom="0"

นี่คือเคล็ดลับ CSS บริสุทธิ์อื่น ๆ ซึ่งไม่ส่งผลกระทบต่อการไหลขององค์ประกอบ

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

คุณอาจไม่ต้องการตำแหน่งแน่นอนเพราะมันแบ่ง reflow: ในบางสถานการณ์เป็นทางออกที่ดีคือการทำให้องค์ประกอบปู่ย่าตายายและองค์ประกอบหลักdisplay:table; display:table-cell;vertical-align:bottom;หลังจากทำเช่นนี้คุณควรจะสามารถให้องค์ประกอบของเด็กdisplay:inline-block;และพวกเขาจะไหลไปทางด้านล่างของผู้ปกครองโดยอัตโนมัติ

หมายเหตุ: นี่ไม่ใช่วิธีที่ดีที่สุดที่จะทำได้!

สถานการณ์ : ฉันต้องทำแบบเดียวกันนี้เท่านั้นฉันไม่สามารถเพิ่ม divs พิเศษได้ดังนั้นฉันจึงติดอยู่กับสิ่งที่ฉันมีและแทนที่จะลบ innerHTML และสร้างอีกหนึ่งทาง javascript เหมือน 2 เรนเดอร์ฉันจำเป็นต้องมีเนื้อหาที่ ด้านล่าง (แถบภาพเคลื่อนไหว)

วิธีแก้ปัญหา: เมื่อดูว่าฉันเหนื่อยแค่ไหนมันถึงเป็นเรื่องปกติที่จะคิดถึงวิธีการแบบนี้ แต่ฉันรู้ว่าฉันมีองค์ประกอบ DOM หลักซึ่งความสูงของแท่งเริ่มต้นจาก

แทนที่จะล้อเล่นกับ javascript อีกต่อไปฉันใช้คำตอบ CSS ( ไม่ใช่ความคิดที่ดีเสมอไป )! :)

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

ใช่ว่าถูกต้องแทนที่จะวางตำแหน่ง DOM ฉันได้เปิดพาเรนต์กลับหัวลงใน css

สำหรับสถานการณ์ของฉันมันจะทำงาน! เป็นไปได้สำหรับคนอื่นด้วย! ไม่มีเปลวไฟ! :)

นี่คือวิธีหลีกเลี่ยง div และตารางที่แน่นอนหากคุณทราบความสูงของผู้ปกครอง:

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

ตัวอย่าง

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