Làm cách nào tôi có thể gửi <div> bên dưới xuống dưới cùng của cha mẹ <div>?

Các div bên trong một hình ảnh div và mã dưới đây. Bởi vì sẽ có văn bản và hình ảnh của div cha. Và div đỏ sẽ là yếu tố cuối cùng của div cha.

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

Đây là một cách

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

Nhưng vì div bên trong được định vị tuyệt đối, bạn sẽ luôn phải lo lắng về nội dung khác trong div bên ngoài chồng chéo lên nó (và bạn sẽ luôn phải đặt độ cao cố định).

Nếu bạn có thể làm điều đó, tốt hơn là biến div bên trong đó thành đối tượng DOM cuối cùng trong div bên ngoài của bạn và đặt nó thành "xóa: cả hai".

Một cách 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;
}

Biên tập:

Nguồn - Hướng dẫn Flexbox

Hỗ trợ trình duyệt cho flexbox - Caniuse

Tạo div bên ngoài position="relative"và div bên trong position="absolute"và thiết lập nó bottom="0".

Đây là một thủ thuật CSS thuần túy khác, không ảnh hưởng đến luồng phần tử.

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

Bạn có thể không muốn định vị tuyệt đối vì nó phá vỡ dòng chảy lại: trong một số trường hợp, một giải pháp tốt hơn là tạo phần tử ông bà display:table;và phần tử cha display:table-cell;vertical-align:bottom;. Sau khi làm điều này, bạn sẽ có thể cung cấp cho các phần tử con display:inline-block;và chúng sẽ tự động chảy về phía dưới của cha mẹ.

Lưu ý: Đây không phải là cách tốt nhất có thể để làm điều đó!

Tình huống : Tôi đã phải làm điều tương tự chỉ tôi không thể thêm bất kỳ div nào, do đó tôi bị mắc kẹt với những gì tôi có và thay vì xóa InternalHTML và tạo một cái khác thông qua javascript gần giống như 2 tôi cần có nội dung tại phía dưới (thanh hoạt hình).

Giải pháp: Cho rằng tôi đã mệt mỏi như thế nào vào thời điểm đó có vẻ bình thường khi nghĩ đến một phương pháp như vậy tuy nhiên tôi biết tôi có một phần tử DOM gốc mà chiều cao của thanh bắt đầu từ đó.

Thay vì làm rối với javascript, tôi đã sử dụng câu trả lời CSS ( KHÔNG LUÔN Ý TƯỞNG TỐT )! :)

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

Đúng vậy, thay vì định vị DOM, tôi đã lật ngược cha mẹ của nó trong css.

Đối với kịch bản của tôi, nó sẽ làm việc! Có thể cho người khác quá! Không có ngọn lửa! :)

Đây là cách để tránh các div và bảng tuyệt đối nếu bạn biết chiều cao của cha mẹ:

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

Thí dụ

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