Цвет фона отображается только над сгибом

Question

Попробуйте получить доступ к ацетеинтервью.co на свой мобильный телефон и перейдите на страницу 2. Вы увидите, что часть экрана, которую вы видите, когда вы приземляетесь на страницу, имеет цвет фона, но когда вы начало прокрутки становится белым, и вы не видите последнюю часть моего контента.

Любые идеи, как исправить?

 .page { 
 
      display:none; 
 
      padding-left: 20px; 
 
      padding-right: 20px; 
 
      padding-top: 0px; 
 
      padding-bottom: 0px; 
 
     } 
 
     
 
     * { 
 
      box-sizing: border-box; 
 
      } 
 
     
 
      body { 
 
       width: 100vw; 
 
       height: 100vh; 
 
       margin: 0; 
 
       font-family: "Helvetica Neue" !important; 
 
      } 
 
     
 
      html { 
 
       margin: 0; 
 
      } 
 
     
 
      .jumbotron { 
 
       height:100%; 
 
       background: url('hero-bg-v1.jpg'); 
 
       text-align: center; 
 
       margin: 0 !important; 
 
      } 
 
     
 
      h1 { 
 
       color: #FFFFFF !important; 
 
       font-size: 45px !important; 
 
       padding-top: 10%; 
 
       font-weight: 500; 
 
       line-height: 50px; 
 
       letter-spacing: 0.8px; 
 
      } 
 
     
 
      h2 { 
 
       color: #FFFFFF !important; 
 
       font-size: 20px !important; 
 
       font-weight: 400; 
 
       letter-spacing: 0.8px; 
 
       padding-bottom: 20px; 
 
      } 
 
     
 
      #page1 { 
 
       width: 100%; 
 
       height: 100%; 
 
       background-color: #7DBB91; 
 
      } 
 
     
 
      #page2 { 
 
       width: 100%; 
 
       height: 100%; 
 
       background-color: #8BCBCA; 
 
      } 
 
     
 
      #page3 { 
 
       width: 100%; 
 
       height: 100%; 
 
       background-color: #C384C5; 
 
      } 
 
     
 
      #page4 { 
 
       width: 100%; 
 
       height: 100%; 
 
       background-color: #7C8DF5; 
 
      } 
 
     
 
      #page5 { 
 
       width: 100%; 
 
       height: 100%; 
 
       background-color: #E96C6C; 
 
       text-align: center; 
 
      }

 <div class="container"> 
 
       <div class="row"> 
 
       <h1 class="advice">ADVICE #1</h1> 
 
       </div> 
 
       <div class="row"> 
 
       <div class="col-sm-5"> 
 
        <p class="quote">Always, always research the company you are interviewing with. What is their core product? 
 
        What other opportunities are they pursuing? What are the challenges they are facing? 
 
        </p> 
 
        <br> 
 
        <br> 
 
        <button type="button" class="btn-md sales-cta" id="previousbuttonpage1">Previous</button> 
 
        <button type="button" class="btn-md sales-cta" id="nextbuttonpage1">Next</button> 
 
       </div> 
 
       <div class="col-sm-7 text-center hidden-xs"> 
 
        <%= image_tag("quote.png", width: "250", height: "170") %> 
 
        <h2 class="author">Girl</h2> 
 
        <h3 class="job-title">Product Manager</h3> 
 
        <h4 class="company">Google</h4> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-xs-12 hidden-xs"> 
 
       <div class="author-picture" id="joe"> 
 
       <%= image_tag("joe-zadeh.png") %> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 

Answer 1

Как я предполагаю, что это проблема:

body { height: 100vh;} 

100vh ограничивает Heigh до высоты видового экрана. Измените это на height:100% или min-height:100vh; как предложено Paulie_D