html - 如何将文本对象放置在页面下方 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

您可以将 body 设置为 100%，然后使用包装器 div 来容纳 home dive 上方的所有内容。使包装 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>