时间戳

首页 > 解决方案 > 如何将文本对象放置在页面下方 90% 的位置？

html - 如何将文本对象放置在页面下方 90% 的位置？

问题描述

我在页面中间水平放置了一个文本对象。我想把它放在我的页面下面的 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;
  }

标签： htmlcssweb

解决方案

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

推荐阅读