Bir iç <div> öğesini üst <div> alt kısmına nasıl gönderebilirim?

Aşağıdaki başka bir div resmi ve kodu içindeki div. Çünkü div div'in metin ve görüntüleri olacaktır. Ve kırmızı div, ana div'in son öğesi olacaktır.

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

Bu bir yol

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

Ancak iç div kesinlikle konumlandırıldığından, dış div'deki diğer içerikle çakışan her zaman endişelenmeniz gerekir (ve her zaman sabit yükseklikler ayarlamanız gerekir).

Bunu yapabiliyorsanız, bu iç div'i dış divinizdeki son DOM nesnesi yapmak ve "temizle: her ikisi" olarak ayarlamasını sağlamak daha iyidir.

Esnek kutu yolu.

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

Düzenle:

Kaynak - Flexbox Kılavuzu

Flexbox için tarayıcı desteği - Caniuse

Dış div position="relative"ve iç div yapın position="absolute"ve ayarlayın bottom="0".

İşte bir element akışını etkilemeyen başka bir saf CSS hilesi.

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

Mutlak konumlandırma isteyemezsiniz çünkü yeniden akışı bozar: bazı durumlarda daha büyük çözüm büyükbaba veya büyükanne elemanını display:table;ve ana elemanı yapmaktır display:table-cell;vertical-align:bottom;. Bunu yaptıktan sonra, alt öğeleri verebilmelisiniz display:inline-block;ve bunlar otomatik olarak ebeveynin altına doğru akacaktır.

Not: Bu kesinlikle mümkün olan en iyi yol değildir!

Durum : Ben sadece herhangi bir ekstra div eklemek mümkün değildi aynı thign yapmak zorunda kaldı, bu yüzden ben vardı ne ile sıkışmış ve bunun yerine innerHTML kaldırma ve neredeyse 2 render gibi javascript ile başka bir oluşturmak yerine alt (hareketli çubuk).

Çözüm: O zaman ne kadar yorgun olduğum göz önüne alındığında, böyle bir yöntemi düşünmek bile normal görünüyor, ancak çubuğun yüksekliğinin başladığı bir ana DOM öğesine sahip olduğumu biliyordum.

Javascript ile karışıklık daha başka bir ( her zaman iyi bir fikir değil ) CSS cevap kullanılır! :)

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

Evet thats doğru, DOM konumlandırma yerine, üst css içinde baş aşağı döndü.

Benim senaryom için işe yarayacak! Muhtemelen başkaları için de! Alev Yok! :)

Ebeveynin yüksekliğini biliyorsanız mutlak div ve tablolardan kaçınmanın yolu:

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

Misal

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