Как в bootsrap5 растянуть ( !не прижать! ) блок до низа страницы?

от
prokoding.ru > Bootstrap > Как в bootsrap5 растянуть ( !не прижать! ) блок до низа страницы?

В Bootstrap 5 для растягивания блока до низа страницы можно применить несколько подходов.

Первый подход состоит в использовании классов flex-контейнера для родительского элемента и установке высоты 100% для всех родительских элементов до корневого элемента <html>. Для этого можно использовать классы "d-flex" и "flex-column" для родительского элемента и класс "vh-100" для всех родительских элементов до <html>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
  <title>Stretch Block to the Bottom with Bootstrap 5</title>
</head>
<body>
  <div class="d-flex flex-column vh-100">
    <!-- Здесь размещаем ваш контент -->
  </div>
</body>
</html>

Второй подход - использование классов position-fixed и position-absolute. Вы можете применить класс "position-fixed" к вашему блоку, чтобы сделать его фиксированным, а затем применить класс "position-absolute bottom-0 start-0 end-0" для растягивания блока до низа страницы:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
  <style>
    .stretch-block {
      height: 100%;
    }
  </style>
  <title>Stretch Block to the Bottom with Bootstrap 5</title>
</head>
<body>
  <div class="position-fixed bottom-0 start-0 end-0 stretch-block">
    <!-- Здесь размещаем ваш контент -->
  </div>
</body>
</html>

Третий подход - использование класса "min-vh-100" для растягивания блока до высоты страницы. Вы можете просто применить класс "min-vh-100" к родительскому элементу, чтобы растянуть его до высоты страницы:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
  <title>Stretch Block to the Bottom with Bootstrap 5</title>
</head>
<body>
  <div class="min-vh-100">
    <!-- Здесь размещаем ваш контент -->
  </div>
</body>
</html>

Одним из этих подходов вы сможете растянуть блок до низа страницы в Bootstrap 5, но выбор зависит от ваших конкретных требований и макета.