it-swarm.com.ru

Положение div в нижней части другого div без использования Absolute

У меня есть один div в другом div. Внутренний div имеет поля 0, auto для его централизации. Однако я не могу заставить его плавать на дно, не сделав его абсолютным. Есть ли способ сделать относительный элемент div плавающим в нижней части обычного элемента div? 

12
user3506938

Без использования position: absolute вам придется выровнять его по вертикали.

Вы можете использовать vertical-align: bottom, который, согласно docs :

Свойство вертикального выравнивания CSS определяет вертикальное выравнивание встроенного блока или ячейки таблицы.

Итак, либо установите внешний div как встроенный элемент, либо как table-cell:

#outer {
  height: 200px;
  width: 200px;
  border: 1px solid red;
  display: table-cell;
  vertical-align: bottom;
}

#inner {
  border: 1px solid green;
  height: 50px;
}
<div id="outer">
  <div id="inner">
  </div>
</div>

14
LcSalazar

В настоящее время вы можете просто использовать display: flex для всех этих проблем выравнивания. 

В вашем случае вы можете просто сделать родителя flex, flex-direction column (по умолчанию - row) и justify-content: flex-end. Преимущество этого подхода в том, что он также работает, если у вас есть несколько элементов в родительском элементе.

Если у вас есть несколько из них и вы хотите, чтобы все они были выровнены от начала родительского до конца, вы можете изменить justify-content на другое свойство, такое как space-between или space-evenly.

#outer {
  height: 200px;
  width: 200px;
  border: 1px solid red;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

#inner {
  border: 1px solid green;
  height: 50px;
}
<div id="outer">
  <div id="inner">
  </div>
</div>

4
Obed Marquez Parlapiano

Добавьте этот стиль к внутреннему div.

position: relative;
top: 100%;
transform: translateY(-100%);
1
wizzfizz94

Единственный способ, который я нашел, если ваш контент не имеет статической высоты, это сделать это с помощью jquery следующим образом:

$(document).ready(function(){
  inner_height = $('#inner-div').height();
  outer_height = $('#outer-div').height();
  margin_calc = (outer_height - inner_height)
  $('#inner-div').css('margin-top', (margin_calc+'px'));
});

Это будет работать для столбца div внутри содержащего div, если высота другого столбца больше. 

Невероятно, что эта простая вещь не «встроена» через css-свойство (то есть «float: bottom»), которое не разбивает все остальное абсолютами и т.д.

0
JosephK