Как сохранить нижний колонтитул внизу страницы и центрировать его по html & css? - PullRequest
Новая
       30

Как сохранить нижний колонтитул внизу страницы и центрировать его по html & css?

0 голосов
/ 14 мая 2019

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

CSS: 

footer {
  background-color: transparent;
  margin-top: -0.5em;
  padding: 2em;
  position: absolute; 
}

HTML: 

<footer>
  &copy; Copyright 2019. All Rights Reserved.<br>
  <a href ="mailto:kaijumydude@gmail.com">KaijuMyDude@gmail.com</a>
</footer>

Ответы [ 3 ]

1 голос
/ 14 мая 2019

Одним из решений является установка родительского элемента flexbox, такого как body, и выравнивание элементов по вертикальной оси. В этом примере я добавляю элемент main, который, используя flex-grow: 1, занимает наибольшее пространство, доступное в родительском контейнере. Родитель установлен на min-height: 100vh, что означает, что он по крайней мере такой же высоты, как и полный видовой экран. footer затем занимает оставшееся место. Если содержимое main станет достаточно высоким, footer будет естественным образом перемещено вниз по странице. 

html,
body {
  margin: 0;
}

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

main,
footer {
  padding: 2em;
}

main {
  flex-grow: 1;
  background-color: salmon;
}

footer {
  background-color: transparent;
  text-align: center;
}
<main>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique debitis, repellat adipisci, id facere quia sequi dicta corrupti necessitatibus quibusdam non nihil tempora, ipsum, sint. Voluptate a harum illo, non.</p>
</main>
<footer>
  &copy; Copyright 2019. All Rights Reserved.<br>
  <a href="mailto:kaijumydude@gmail.com">KaijuMyDude@gmail.com</a>
</footer>

jsFiddle

1 голос
/ 14 мая 2019 

footer {
  background-color: transparent;
  margin-top: -0.5em;
  padding: 2em;
  position: fixed; 
  left: 50%;
  transform:translateX(-50%);
  bottom: 0;

}


use `transfrom` and `left: 50%`
<footer>
  &copy; Copyright 2019. All Rights Reserved.<br>
  <a href ="mailto:kaijumydude@gmail.com">KaijuMyDude@gmail.com</a>
</footer>
0 голосов
/ 14 мая 2019 

footer {
  background-color: transparent;
  margin-top: -0.5em;
  padding: 2em;
  position: absolute; 
  text-align:center;
  width: 100%;
  } 
<footer>
  &copy; Copyright 2019. All Rights Reserved.<br>
  <a href ="mailto:kaijumydude@gmail.com">KaijuMyDude@gmail.com</a>
</footer>

Надеюсь, это поможет вам как решение.

...