网站部分被切断

Question

嗨，我在网站Link here to broken portion的这一部分，由于某些原因，我的其中一个部分的底部被切除了。如果我在main类中添加了不同的边距或填充，我只会添加白色区域，并且引导卡仍然无法读取。有什么想法吗？

图片：

HTML代码：

<div class="main">
  <div class="page-header" id="Services" style="background-image: url('./assets/img/background-grassfade.png'); background-color:#fff;">
    <div class="filter"></div>
    <div class="container-fluid">
      <div class="motto">


        <div class="row">
          <div class="col-md-8 offset-md-2 text-center">
            <div class="space-top"></div>
            <h2 class="title">Services</h2>
          </div>
          <div class="container">
            <div class="space-top"></div>

            <div class="card" data-background="color" data-color="blue">
              <div class="card-body text-center d-flex flex-column">
                <div class="row">
                  <div class="col-md-4 align-self-center vcenter">
                    <div class="card-icon">
                      <i class="far fa-car-mechanic"></i>
                    </div>
                  </div>
                  <div class="col-md-8 venter">
                    <h4 class="card-title">Roadside Assistance</h4>
                    <p class="card-description">Jumpstarting, Tire changes, Fuel and fluid dilvery, Extrication/Pullout. </p>
                    <p class="card-footer align-self-end mt-auto">
                      <b>*Delivery of non-alcoholic refreshments upon request for an additional charge.</b>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="card" data-background="color" data-color="green">
              <div class="card-body text-center d-flex flex-column">
                <div class="row">
                  <div class="col-md-4 align-self-center vcenter">
                    <div class="card-icon">
                      <i class="far fa-people-carry"></i>
                    </div>
                  </div>
                  <div class="col-md-8 venter">
                    <h4 class="card-title">Hauling</h4>
                    <p class="card-description">Including Rock, Sand, Mulch, Dirt, Feed, Hay, Plants, Trees, Firewood, Applicances, etc. Moving Services, Junk/debris cleanup, small buisness deliveries, post garage sale deliveries. </p>
                    <p class="card-footer align-self-end mt-auto">
                      <b>*Loading, transport and unloading covered.</b>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="card" data-background="color" data-color="orange">
              <div class="card-body text-center d-flex flex-column">
                <div class="row">
                  <div class="col-md-4 align-self-center vcenter">
                    <div class="card-icon">
                      <i class="far fa-home"></i>
                    </div>
                  </div>
                  <div class="col-md-8 venter">
                    <h4 class="card-title">Residential Home Exterior</h4>
                    <p class="card-description">Including Snow removal (driveways and sidewalks only currently) , Lawn care, Tree and Bush pruning/trimming, Stump removal, Leaf removal, Gutter cleaning, yard debris and junk removal, Landscaping, Power washing (Homes, Concrete, vehicles),
                      Window washing, Light construction demolition, Fence demolition. </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="card" data-background="color" data-color="brown">
              <div class="card-body text-center d-flex flex-column">
                <div class="row">
                  <div class="col-md-4 align-self-center vcenter">
                    <div class="card-icon">
                      <i class="far fa-toolbox"></i>
                    </div>
                  </div>
                  <div class="col-md-8 venter">
                    <h4 class="card-title">Residential Home Interior</h4>
                    <p class="card-description">Including Window washing, Batt insulation installation and removal, Drywall installation and removal, Indoor painting, Mild carpet and flooring cleanings, Maid services, Rearranging furniture, Drain cleaning, General home maintenance,
                      Baby proofing. </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="card" data-background="color" data-color="yellow">
              <div class="card-body text-center d-flex flex-column">
                <div class="row">
                  <div class="col-md-4 align-self-center vcenter">
                    <div class="card-icon">
                      <i class="far fa-shopping-basket"></i>
                    </div>
                  </div>
                  <div class="col-md-8 venter">
                    <h4 class="card-title">Miscellaneous Services</h4>
                    <p class="card-description">Construction site clean up, Storm debris removal, Grocery pick up and delivery, vehicle hail dent repair, vehicle washing and detailing (we drive to you!), Dog walking, pet feces removal (outdoors only), Holiday lights/decoration installation.
                      Looking for something not on this list? Call for pricing/availability! </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

该模板来自Creative Tim：Creative Tim's Website，所使用的CSS是所包含的CSS，具有最小的更改，没有任何内容可以触及任何

。

我尝试过的事情：

1. 向main，container-fluid，motto和row以及边距/边距

   添加边距/边距
   < / li>

2. 我试图更改其下面部分的页边距顶部。

3. 我尝试使用<br />和提供的space-top类添加空间。

如果需要，我可以在下面的部分中包含更多的HTML。我目前包含一个指向该站点的链接，您应该可以使用inspect元素在抓取CSS时进行筛选，但是如果需要，我可以包括CSS。我找不到任何地方说不能直接将链接发布到我的页面，但是如果无法通知我，我将其删除。

Answer 1

page-header中的paper-kit.css元素具有最大高度：

.page-header {
    max-height: 999px;
}

您的内容必须高于该最大高度（不确定为什么要在垂直布局的div上设置最大高度，但是很好）。在网络开发工具中将其注释掉，一切看起来都很好。

Answer 2

类页面标题中的最大高度为999px，这限制了将其删除的高度