Как прижать блок к нижнему блоку внутри?

Чтобы прижать блок к нижнему блоку внутри, мы можем использовать различные методы в HTML и CSS. Далее я опишу несколько основных приемов.

Первый способ - использование CSS свойства position и bottom. Мы можем установить значение position для нашего блока как relative, чтобы создать контекст, в котором будут применяться настройки размещения. Затем мы можем использовать свойство bottom, чтобы задать расстояние между нижним краем блока и другими элементами. Например:

<style>
   .container {
      position: relative;
      height: 400px; /* для демонстрации */
      border: 1px solid black; /* для демонстрации */
   }

   .block {
      position: absolute;
      bottom: 0;
   }
</style>

<div class="container">
   <!-- другие элементы -->
   <div class="block">
      <!-- содержимое блока -->
   </div>
</div>

Второй способ - использование CSS свойства flexbox. Этот метод предоставляет большую гибкость в размещении элементов. Мы можем создать контейнер с display: flex и установить justify-content в space-between или space-around, чтобы распределить пространство между блоками. Затем мы можем использовать align-self: flex-end для блока, который мы хотим прижать к нижнему блоку. Например:

<style>
   .container {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 400px; /* для демонстрации */
      border: 1px solid black; /* для демонстрации */
   }

   .block {
      align-self: flex-end;
   }
</style>

<div class="container">
   <!-- другие элементы -->
   <div class="block">
      <!-- содержимое блока -->
   </div>
</div>

Третий способ - использование CSS свойства grid. Этот метод также обеспечивает гибкость в размещении элементов. Мы можем создать контейнер с display: grid и установить grid-template-rows так, чтобы последний ряд имел значение auto и занимал доступное свободное пространство. Затем мы можем использовать align-self: end для блока, который мы хотим прижать к нижнему блоку. Например:

<style>
   .container {
      display: grid;
      grid-template-rows: repeat(auto-fill, minmax(100px, auto));
      height: 400px; /* для демонстрации */
      border: 1px solid black; /* для демонстрации */
   }

   .block {
      align-self: end;
   }
</style>

<div class="container">
   <!-- другие элементы -->
   <div class="block">
      <!-- содержимое блока -->
   </div>
</div>

Независимо от метода, который мы выберем, мы можем достичь желаемого результата, прижав блок к нижнему блоку внутри контейнера. Выбор метода может зависеть от других требований проекта или предпочтений разработчика.