Элемент нижнего колонтитула html не позиционируется внизу?

Я хочу, чтобы нижний колонтитул был внизу страницы, но не отображался внизу. Он уходит в сторону или вверх рядом с навигацией или, если он отображается внизу страницы, то его цвет градиента фона применяется и к верхнему элементу div.

Я пробовал следующий код:

body::after {
    content: '';
    display: block;
    height: 90px;
}

#footerindex {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 90px;
}

Second code-

#footer {clear: both;
    position: relative;
    height: 40px;
    margin-top: -40px;

}

 <footer style = "background: linear-gradient(to bottom, #4e54c8, #8f94fb)">
    <div id = "footerindex">
      <a href = "terms.html"> Terms and conditions </a> <a href = "privacy.html" style = "padding-left: 15px;">Privacy Policy</a> 
      <p>&#169; Copyright 2019 - jobg.xyz, All Rights Reserved. </p>
      <p>Website designed and developed by Riven Apwbihls</p>
    </div>
  </footer>

html css footer

07.03.2019 12:57

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 2

Вы можете использовать flexbox. Для быстрой информации о flexbox нажмите здесь.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

nav {
  height: 50px;
  width: 100vw;
  background-color: green;
}

main {
  width: 100vw;
  flex: 1;
}

footer {
  height: 50px;
  width: 100vw;
  background-color: grey;
}

<body>
  <nav>
    Nav
  </nav>
  <main>
    Main
  </main>
  <footer>
    Footer
  </footer>
</body>

Элемент flex: 1 изменяет размер элемента main так, чтобы он занимал оставшееся место.

07.03.2019 13:08

добавил ваш #footerindex css в footer

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 90px;
}

body::after {
    content: '';
    display: block;
    height: 90px;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 90px;
}

#footer {clear: both;
    position: relative;
    height: 40px;
    margin-top: -40px;

}

<footer style = "background: linear-gradient(to bottom, #4e54c8, #8f94fb)">
    <div id = "footerindex">
      <a href = "terms.html"> Terms and conditions </a> <a href = "privacy.html" style = "padding-left: 15px;">Privacy Policy</a> 
      <p>&#169; Copyright 2019 - jobg.xyz, All Rights Reserved. </p>
      <p>Website designed and developed by Riven Apwbihls</p>
    </div>
  </footer>

07.03.2019 13:10

Другие вопросы по теме

Как я могу уменьшить ширину таблицы или заставить ее реагировать на хром? (развернутое веб-приложение Django/Python)

Анимация box-shadow в сафари не исчезает

Пользовательский домен не загружает CSS (Azure)

Таблица Bootstrap 4 слишком широка для мобильных устройств

Как переключаться между фотографиями в одностраничном приложении?

Равномерное позиционирование блоков по горизонтали с помощью Grid Layout — HTML

CSS/Query: размещение кликабельного значка между th и td таблицы без использования второй таблицы

Как показать только абзац, когда курсор находится на заголовке

Как удалить элементы идентификатора диапазона номеров со страницы?

Flex 1:1 не работает с ионной сеткой. Мне нужно выделить пространство 50:50

Элемент нижнего колонтитула html не позиционируется внизу?

Ответы 2

Другие вопросы по теме

Похожие вопросы