Прикрепить дочерний блок к подвалу родительского

Question

Бьюсь битый час, не могу понять, как прибить дочерний <div class="navigation"> к низу <div class="wrapper" Вот код: https://playcode.io/606650

Пробовал verctical-align: bottom - не помогло

UPD: Между оберткой и этим подвалом будет таблица, т.е. подвал должен быть зафиксирован относительно положения подвала и опускататься в зависимости от длины таблицы

Answer 1

В вашем случае можно воспользоваться position: absolute для дочернего блока

Вот пример, основанный на вашем исходнике (смотрите в полноэкранном режиме):

html {
  height: 100%;
}

body {
  font-family: 'Comic Sans';
  height: 100%;
}

.header {
  background-color: #004682;
  font-size: 23pt;
  width: 100%;
  height: 60px;
  padding: 7px;
  text-align: right;
}

.header a {
  color: white;
  margin-right: 20px;
}

.wrapper {
  margin: 0 auto;
  padding-bottom: 50px;
  width: 100%;
  min-height: 100%;
  height: auto;
  position: relative;
}

.footer {
  margin: -50px auto 0;
  position: relative;
  background-color: #004682;
  color: white;
  font-size: 20pt;
  width: 100%;
  height: 50px;
  padding: 5px;
  text-align: center;
}

.navigation {
  overflow: hidden;
  display: block;
  margin: 0 auto;
  padding: 5px;
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<div class="wrapper">
  <header class="header">
    <a href="#" align="right"> Главная </a>
    <a href="#" align="right"> Новости </a>
    <a href="#" align="right"> О нас </a>
    <a href="#" align="right"> Выйти </a>
  </header>

  <div class="navigation">
    <nav>
      <ul class="pagination">
        <li class="page-item">
          <a class="page-link">‹</a>
        </li>
        <li class="page-item">
          <a class="page-link">1</a>
        </li>
        <li class="page-item active">
          <span class="page-link">2</span>
        </li>
        <li class="page-item disabled">
          <span class="page-link">›</span>
        </li>
      </ul>
    </nav>
  </div>
</div>
<footer class="footer">
  <span>ООО "МОЯ КОМАНИЯ"</span>
</footer>

БЛОГ НА HUSL

Прикрепить дочерний блок к подвалу родительского

Ответы (1 шт):