Как разместить div в нижней части другого div без знания высоты div родителя

Question

У меня были некоторые проблемы для решения этой проблемы.

У меня есть заголовок div без установленной высоты, потому что может иметь переменное значение в зависимости от браузера. Внутри нее у меня есть еще два divs, и я хочу разместить один div exacly в нижней части другого, но я никогда не знаю высоты «заголовка». Я попытался определить высоту для заголовка div, но иногда он терпит неудачу.

Answer 1

просто использовать clear:both для второго DIV в нижней части, и установите высоту заголовка в height:auto

Образец:

<div id="header"> 
    <div id="first"> 
     first 
    </div> 

    <div id="second"> 
    second 
    </div> 
</div> 

CSS:

#header{height:auto} 
#first{} 
#second{clear:both} 

DEMO

Answer 2

Использовать position:absolute в сочетании с контекстом позиционирования на родителях, например:

<header> 
    Ohai 
    <div> 
     Noes! 
    </div> 
</header> 

CSS:

header { 
    position:relative; 
    height:25%; 
    background:#eee; 
} 
div { 
    position:absolute; 
    bottom:0; 
    left:50%; 
    margin-left:-50px; 
    width:100px; 
    background:red; 
} 

размера заголовка неизвестно, так как он основан на высоту окна просмотра, а ДИВ привязан к его дно с комбинацией position:absolute и bottom:0. Заголовок нуждается в position:relative, чтобы обозначить контекст позиционирования, используемый абсолютно позиционированными дочерними элементами.

Fiddle here.

Answer 3

Один из способов сделать это - установить position:relative на заголовок div и position:absolute и bottom:0 на дочерний div, который вы хотите сесть в нижней части заголовка.

jsFiddle example

Answer 4

<div> 
    <div> 
     div1 
    </div> 
    <div> 
     div2 
    </div> 
</div> 

Answer 5

<div id="header"> 

      <h2>Some title..</h2> 


      <div class="right">   
       <p style="color: black;display: inline"> 
        Some data..... 
       </p>     
      </div> 


      <div class="left">    
       <form action="#" > 
        <input type="text" placeholder="put here..." required="required"> 
        <button type="submit">Validar</button> 
       </form> 
      </div> 


     </div> 

CSS:

#header{position: relative;height: 150px; border:1px solid black} 
.right{right: 0; bottom: 0; top:auto; position: absolute} 
.left {left: 0; bottom: 0; top:auto; position: absolute} 

Эта работа очень хорошо в Chrome и Firefox, но не работает в IE. Разделитель, который имеет левый css, не помещается в нижней части «заголовка».