Home / Questions / 25743
Accepted
Otto
Asked: 2020-10-02 07:04:03 +0800 CST 2020-10-02 07:04:03 +0800 CST

Как создать нижний колонтитул, который помещается внизу?

  • 772

Большинство решений основано на создании фиксированного нижнего колонтитула position: fixed.

Другие приведенные альтернативы являются абсолютной позицией.

Пример

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
}

Но плавающий футер нам не по душе, это не решение хуже, когда у нас плавающее меню и футер со heightслишком высоким концом.


Но какой смысл иметь нижний колонтитул, который остается внизу.

  • Что он остается только внизу, когда контент или информационная область не группируются по количеству.

Пример (область с кратким содержанием).

введите описание изображения здесь

Решение для получения нижнего колонтитула из этого кадра:

введите описание изображения здесь

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

Одним из решений может быть использование jQuery для определения высоты и применения класса для точного прилегания нижнего колонтитула к нижней части.


Как бы решение подкинуть с jQuery ( для любителей программирования на jquery ).

Или какие другие альтернативы можно применить с помощью CSS без плавающего нижнего колонтитула?

jquery

2 Answers

  1. Best Answer

    Для этого вам не нужен JavaScript/jQuery или HTML5/CSS3, есть решение CSS, которое работает даже со старыми версиями браузеров. Идея заключается в следующем:

    • Заставьте документ заполнить всю высоту страницы (поставьте height:100%для htmlи body.
    • Инкапсулируйте все содержимое вашей страницы в контейнер, который также занимает 100% высоты и имеет относительное положение.
    • Содержимое вашей страницы будет иметь paddingнижнюю часть, равную или превышающую высоту нижнего колонтитула.
    • Нижний колонтитул будет расположен абсолютно под содержимым, которое инкапсулирует все.

    Код будет выглядеть так:

    html, body {
  margin:0;
  padding:0;
  height:100%;
}

#pagina {
  position: relative;
  min-height: 100%;
}

#contenido {
  padding-bottom:50px; /* este valor debe ser igual o mayor al alto del pie */
}

#pie {
  height:50px;
  line-height:50px;
  background:black;
  color:white;
  text-align:center;
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
}
    <div id="pagina">
  <div id="cabecera">LOGO</div>
  <div id="contenido"></div>
  <div id="pie">2016 &copy; Nombre Empresa</div>
</div>

    Поскольку вам нужна альтернатива с JavaScript/jQuery, вот она для вас; хотя я говорю вам, что может быть много возможностей и, как я уже упоминал в комментарии, это действительно не обязательно с описанным выше CSS.

    Идея заключалась бы в том, чтобы сделать что-то вроде этого:

    • Поместите различные элементы на страницу, независимо от высоты или чего-либо еще.
    • Сделайте нижний колонтитул абсолютной позицией, но не указывайте, какую именно.
    • Создайте функцию, которая:
      • Рассчитать высоту документа
      • Рассчитать высоту окна
      • Рассчитать высоту стопы/футера
      • Если высота документа + высота нижнего колонтитула меньше высоты окна, то сделайте нижний колонтитул ниже
      • Если нет, оставьте нижний колонтитул там, где он есть.
    • Создайте обработчик, чтобы функция, созданная на предыдущем шаге, вызывалась при загрузке страницы и изменении размера окна.

    Вот пример того, как это можно сделать:

    function ajustarPie() {
  var winH = $(window).height();
  var docH = $("body").height();
  var pieH = $("footer").height();
  
  if (docH + pieH < winH) {
    $("footer").attr("class", "bottom");
    } else {
      $("footer").attr("class", "");
      }
  }

$(document).ready(ajustarPie);
$(window).on("resize", ajustarPie);
    footer {
  position:absolute;
  height:50px;
  line-height:50px;
  background:black;
  color:white;
  text-align:center;
  left:0;
  width:100%;
}

footer.bottom {
  bottom:0;
  }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<header>LOGO</header>
<main>
  <p>Párrafo 1</p>
  <p>Párrafo 2</p>
  <p>Párrafo 3</p>
  <p>Párrafo 4</p>
  <p>Párrafo 5</p>
</main>
<footer>
  2016 &copy; Nombre empresa
</footer>

    • 5

  2. только то, что он обтекает нижнюю часть страницы (он всегда остается внизу), но это альтернатива только тогда, когда содержимое области короткое. Потому что при обширном контенте проблем с футером не возникает.

    Вы можете сделать это через flexbox:

    *,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.content {
  flex: 1;
  padding: 1rem;
}

header h1 {
  font-family: 'segoe ui';
  font-weight: 500;
  text-align: center;
}
.content p {
  font-family: 'segoe ui';
}
.content p:first-letter {
  font-size: 20pt;
}
footer {
  background-color: #222;
  padding: .5rem .8rem;
}
footer p {
  color: rgba(255,255,255,9);
  font-family: 'segoe ui';
  text-align: center;
}
    <section class="container">
  <header>
    <h1>Header</h1>
  </header>
  <main class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed provident explicabo corporis ad consequatur possimus at recusandae, minus nostrum a laudantium doloremque voluptates, pariatur officiis deleniti molestiae. Quas, quae, minima!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta ipsam consectetur consequatur, natus unde, deserunt sit voluptate a nesciunt vero in inventore quidem! Voluptate, saepe, veritatis laborum mollitia assumenda placeat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, rem, aut. Mollitia quasi, rem vero delectus iusto optio dolorum alias assumenda commodi quod, cum incidunt dolore pariatur ad minus voluptatem.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora laudantium accusamus unde provident possimus rem nemo officiis, quam perferendis, optio repudiandae nulla rerum doloremque culpa, dignissimos veniam aliquid aliquam ratione?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos quos hic rerum, ipsum similique nostrum quis cum repellat eum veritatis magnam vero tempore sequi facere alias, laudantium esse. Nihil, impedit.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, at in! Velit placeat incidunt quidem perspiciatis officiis consequuntur! Tempora nihil nam nemo harum quia adipisci aut, omnis, magni totam quae!
    </p>
    
  </main>
  <footer>
    <p>Footer</p>
  </footer>

    Попробуйте взять два, pчтобы вы могли видеть поведение.

    • 3