Question

当屏幕调整大小时，我希望div的顶部向上或向下移动。目前，如果我调整屏幕大小并将其缩短，则div会隐藏在屏幕下方。

基本上我希望div保持在屏幕上方的百分比。我尝试使用top: x%和margin-top: x%代替像素这样的绝对数字，但这并没有改变任何内容。

查找下面的代码片段：

#blogIntro {
  position:absolute;
  background:white;
  width:40%;
  height: 1050px;
  right:300px;
  margin: 20% 20% 150px 40%;
  z-index:1;
  padding:20px;
}

html {
  background: url(Photos/Main_Home.jpg) no-repeat center center fixed;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
  font-size:10px;
  position:relative;
}

  <div id="blogIntro">
   <p id="blogIntroTitle"><b>PRY</b>VIT<span class="scrollDown">&nbsp;&nbsp;&nbsp;[scroll down]</span></p>
    <h2 id="whoami">WHO AM I</h2>
    <div id="blogIntro1"></div>
    <p>Lorem ipsum dolor sit amet, ea viderer conclusionemque pri. Petentium argumentum at vel, pro eu accusam deleniti iudicabit. Te justo malis molestie sit, his an quod mnesarchum. Ludus vulputate cu pri. Nam te consul moderatius scriptorem, vel nostrum vivendum forensibus ex, te persecuti instructior nam.</p>
    </div>
 </body>
</html>

Answer 1

您是否尝试过使用vh单元？它基本上是客户窗口高度的百分比。请参阅MDN article on viewport percentage lengths。

您也可能对calc() CSS function感兴趣。

调整屏幕大小时向上移动div

1 个答案: