Блог

Главная - Вопросы по программированию - Удаление полей из нижнего колонтитула с помощью CSS

Удаление полей из нижнего колонтитула с помощью CSS

#html #css

Вопрос:

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

Проблема в том, что с обеих сторон нижний колонтитул имеет отступ в несколько пикселей. Как мне это удалить?

 footer {
  width: 100%;
  height: 200px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../assets/footer.png");
  background-position: center;
  color: white;
  text-align: center;
  display: table;
}

footer>p {
  display: table-cell;
  vertical-align: middle;
  font-family: Lato, sans-serif;
  font-size: 11pt;
  font-weight: 400;
  line-height: 1.6667;
  width: 100%;
} 
 <h1> Some text </h1>

<footer>
  <p>Copyright amp;copy; <a href="link" class="white_link">Link</a> 2021. All Rights Reserved.
  </p>
</footer>

Комментарии:

1. Почему display: table; это на самом .footer деле ?

2. Твой footer класс-это единственное, что есть в твоем теле, кроме h1 того, вот почему это единственное, что ты действительно видишь. Вам нужно добавить к нему позиционирование и сказать, чтобы он шел вниз.

Ответ №1:

Чтобы удалить поля, вы должны установить для полей тела значение 0. Кроме того, если вы хотите, чтобы нижний колонтитул оставался внизу страницы, вы должны установить минимальную высоту своего тела и воспользоваться гибкостью. Вот фрагмент кода:

 body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: space-between;
  margin: 0;
}

footer {
  width: 100%;
  height: 200px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../assets/footer.png");
  background-position: center;
  color: white;
  text-align: center;
  display: table;
}

footer>p {
  display: table-cell;
  vertical-align: middle;
  font-family: Lato, sans-serif;
  font-size: 11pt;
  font-weight: 400;
  line-height: 1.6667;
  width: 100%;
} 
 <main>
  <h1> Some text </h1>
</main>

<footer>
  <p>Copyright amp;copy; <a href="link" class="white_link">Link</a> 2021. All Rights Reserved.
  </p>
</footer>

Ответ №2:

На вашей бирке тела, похоже, нанесены поля введите описание изображения здесь

Добавьте это в свой css

 .body {
   margin:0;
 }

Ответ №3:

Попробуйте удалить маржу из body . Не нужно использовать таблицу , вы можете использовать flexbox вместо этого:

 body {
margin: 0;

}
footer {
  width: 100%;
  height: 200px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../assets/footer.png");
  background-position: center;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  margin: 0;
}

footer>p {
  font-family: Lato, sans-serif;
  font-size: 11pt;
  font-weight: 400;
  line-height: 1.6667;
  width: 100%;
} 
 <body>
<h1> Some text </h1>


<footer>
  <p>Copyright amp;copy; <a href="link" class="white_link">Link</a> 2021. All Rights Reserved.
  </p>
</footer>
</body>
Метки: