在 Codepen 中构建个人作品集网站时出现“视口高度错误”错误

Question

错误：欢迎部分的高度应该等于视口的高度。

这是我的 HTML，

<div id = "My-Portfolio">
 <nav id="navbar">
  <a href = "#welcome-section">Projects</a>
 </nav>


 <div id="welcome-section">
  <div class = "move"> <h1> My FCC Portfolio </h1> </div>
  <div id="projects">
    <div class = "project-tile">
     <a href="https://codepen.io/Aaradhyacodepen/pen/abbeMQQ">Here is a 
          technical Documentation Page that I made!</a>
    </div>
  </div>
 </div>

</div>

<div>
  <a id = "profile-link"href="https://www.freecodecamp.org/aaradhya2002" 
    target="_blank">profile-link</a>
</div>

CSS，

#My-Portfolio{
   background-color:rgb(100,21,21,0.4)
}
#navbar{
   position: fixed;
   top: 0;
   width:100%;
   text-align:right;
   background-color:rgb(100,12,12,0.4);
}
#welcome-section{
   width:100%;
   height:281px;
   font-size:50px;
   text-align:center;
}
h1{
   margin-top:200px;
}
a{
   color:black;
   text-decoration:none;
 }
@media (max-width: 400px)
 {
  #navbar
   {
    display: block:
   }
 }
.project-tile{
   background-color:red;
   width: 45%;
   font-size: 40px;
   margin-left: 500px;
}

当我运行测试时，我得到错误 欢迎部分的高度应该等于视口的高度。

这是项目的链接：

- https://codepen.io/Aaradhyacodepen/pen/jOEEZav?editors=1100

Answer 1

您需要将#welcome-section 的高度指定为height:100vh。这意味着welcome 部分将占用视口高度的100%。