Как разместить текстовый объект на 90% вниз по моей странице?

Question

У меня есть текстовый объект, расположенный в середине моей страницы по горизонтали. Я хочу разместить это на 90% вниз моей страницы. Так что, если бы вы смотрели на мою страницу, она была бы чуть выше дна. Я бы использовал margin: 330px;, но я уверен, что он будет отличаться для всех пользователей, поскольку они используют разные разрешения. Вот мой код, если кто-то может помочь

HTML:      
  <div id="home">
    <p>Read More</p>
  </div>

CSS:
  #home {
    width: 100%;
    height: 100vh;
    margin: 0px;
    padding: 0px;
    text-align: center;
  }

  #home p {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 60px;
    color: #FFF;
    margin: 330px;
  }

Answer 1

Для того, чтобы это работало как следует, для каждого пользователя необходимо использовать относительные длины. Чтобы разместить «90% вниз» вашей страницы, вы можете использовать:

margin-top: 90vh;

Проверьте эту ссылку , там вы найдете то, что ищете. Удачи,

Answer 2

Вы можете установить свое тело на 100%, а затем использовать div обертки для размещения всего содержимого выше домашнего погружения.Сделайте div обертки на 90% меньше размера шрифта.

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

#main_content {
  min-height: calc(90% - 60px);
  /* Make space for the font size */
}

#home {
  clear: both;
  position: relative;
  width: 100%;
  text-align: center;
}

#home p {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 60px;
  line-height: 60px;
  color: teal;
  margin: 0px;
}

<div id="main_content">
</div>
<div id="home">
  <p>Read More</p>
</div>

Answer 3

Сделайте контейнер flexbox и выровняйте заголовок по дну, используя margin-top: auto.Чтобы поднять это немного снизу, добавьте значение для margin-bottom (10% в примере).Используйте медиазапросы, если хотите быть очень точным с размещением по размерам экрана.

body {
  margin: 0;
}

#home {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#home p {
  font-family: sans-serif;
  font-size: 60px;
  color: #000;
  margin: auto 0 10%;
}

<div id="home">
  <p>Read More</p>
</div>