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

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

Ответ 1

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

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

Свойство CSS с вертикальным выравниванием указывает вертикальное выравнивание строки inline или table-cell.

Итак, либо установите внешний 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>

Ответ 2

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

В вашем случае вы можете просто сделать родитель гибким, гибким направлением column (по умолчанию строка) и 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>

Ответ 3

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

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

Ответ 4

Единственный способ, которым я нашел, если ваш контент не является статическим, должен был сделать это с помощью 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" ), что не нарушает все остальное с абсолютами и т.д.

Ответ 5

Видеть это,

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

CSS позиционирование внизу без абсолютного позиционирования

Ответ 6

Вы можете сделать это, установив для верхнего значения значение 100%.

HTML

<div class="outer">
<div class="inner"></div>
</div>

CSS

.outer {height:400px;width:400px;background:#eaeaea;}
.inner {position:relative;top:100%;height:50px; width:50px; background:#fad400;}

ознакомьтесь с этой скриптой здесь: http://jsfiddle.net/62wqufgk/