Почему в моем нижнем колонтитуле есть элементы?

Question

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

Вот как я хочу, чтобы это выглядело (красный - фон)



Это мой текущий код нижнего колонтитула.

CSS

#contactLinks {
    position: fixed;
    left: 0;
    bottom: 0;
    margin: 35px 0px 35px 40px;
    background-color: rgb(43, 43, 43);
    width: 100%;
}

#contactLinks a {
    color: #808080;
    text-decoration: none;
    margin: 0px 30px 0px 0px;
}

HTML

<div id="contactLinks">
  <a href="mailto:me@nathfreder.website">Contact</a>
  <a href="https://github.com/nathfreder" target="_blank">GitHub</a>
</div>

Answer 1

У вас есть нижнее поле 35px на нижнем колонтитуле, которое определяет расстояние от дна. Просто удалите это / установите 0 (margin: 35px 0px 0px 40px;).

Answer 2

Если вы хотите, чтобы сообщения не отображались, попробуйте увеличить padding-bottom до элемента нижнего колонтитула, чтобы они не отображались под вашим нижним колонтитулом. Это гарантирует, что элементы нижнего колонтитула останутся там, где вы хотите (в случае, если вы хотите, чтобы они были немного выше, поскольку вы установили нижнее поле на 35 пикселей)

или просто удалите нижнее поле 35px.

OR

Если вы хотите, чтобы элементы под нижним колонтитулом выглядели красными, вы можете добавить еще один <div> и установить свойства CSS следующим образом:

background-color:red;
opacity: 0.5; //if you want to make it transparent.
left: 0;
bottom: 0;
//and set the padding accordingly

Answer 3

ваш нижний колонтитул имеет margin: 35px 0 35px 40px, что означает

margin-top: 35px;
margin-right: 0;
margin-bottom: 35px;
margin-left: 40px;

должно быть margin: 0;