2

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

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

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

1 ответ 1

2

В вашем случае можно воспользоваться 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>

2
  • rда, но я написал, что перед этим блоком будет таблица, так что этот блок заезжает на таблицу, когда та удлиняется
    – GrizzlyK
    18 мая 2020 в 12:56
  • Добавьте после таблицы пустой блок-заглушку с высотой равной высоте блока навигации 18 мая 2020 в 13:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.