Question

尝试在手机上访问acetheinterview.co并转到第2页。您将看到当您登陆页面时看到的屏幕部分具有背景颜色但是当您开始滚动时它会变为白色并且你看不到我内容的最后部分。

任何想法如何解决？

＆＃13;

     .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;
            }

＆＃13;

        <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>

＆＃13;

Answer 1

我猜这是问题所在：

body { height: 100vh;}

100vh将高度限制为视口高度。如Paulie_D建议的那样，将其更改为height:100%或min-height:100vh;

背景颜色仅显示在折叠上方

1 个答案: