我正在制作一个作品集页面，我将初始页面设置为100VH'的高度和100'的宽度，这很好用。但是，我不能向下滚动到我在它下面创建的任何其他元素。它占据了整个页面，并使其他元素消失

return(
      <div>
        <Navbar/>
        
         <section className="valign-wrapper" style={{height: '100vh',width:'100%'}}>
          <div className="center-align" style={{width:'100vw'}}>

       
            <h1 className="animate__animated animate__fadeInDown">Hi, I'm Chijindu</h1>
            
            <div>
            <h3 style={{display:'inline-block',marginRight:'8px',marginTop:'-20px'}} className="animate__animated animate__fadeInLeft">a frontend </h3> <h3 style={{display:'inline-block',marginTop:'-20px'}} className=" green-text animate__animated animate__fadeInRight">developer...</h3>

            </div>
        </div>

        
        

      </section>

        <div class="row red">
      <div class="col s1">1</div>
      <div class="col s1">2</div>
      <div class="col s1">3</div>
      <div class="col s1">4</div>
      <div class="col s1">5</div>
      <div class="col s1">6</div>
      <div class="col s1">7</div>
      <div class="col s1">8</div>
      <div class="col s1">9</div>
      <div class="col s1">10</div>
      <div class="col s1">11</div>
      <div class="col s1">12</div>
    </div>
       
        
        </div>
        

        
        )

视区高度和宽度在section标记中设置。下面的行或列元素都不显示，即使在缩小时也是如此。我甚至不能向下滚动。虽然在浏览器检查时，它表明行和列确实存在，谢谢

为所有的内联造型道歉。

编辑:我还添加了一个带有我复制的样式的背景，并且不确定=&>；

.valign-wrapper {
  background: url('./img/img001.jpg') no-repeat center center fixed;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  
}

这会影响到其他因素吗？