无法摆脱页脚下的空白

Question

我再次为我的图形设计业务选择了Web开发，所以我很回到初学者的状态。

我为正在开发的网站创建了媒体查询，并且我注意到页脚下方有很多查询空白。它仅显示在主页上。其余页面都很好。

我尝试了网上建议的所有内容。什么都没用。我猜我没有足够的内容来容纳HTML文档的高度。

如何在不弄乱其他页面的情况下最小化尺寸？有人对我如何摆脱页脚下的空白有任何想法吗？我试图不对重新学习Web开发感到灰心，但是这种挫折并没有帮助。

这里是主页的HTML和CSS。

   footer {
    height: 65%;
   } 

   .page-footer-logo {
     transform: translateY(22%);
     margin-left: 37.5%;
   }

   .contact-info {
     margin-left: 5%;
     transform: translateY(20%);
   }

   .contact-info p {
     font-size: 19px;
     line-height: 32px;
     text-align: left;
   }

   .nav-links {
     display: none;
   }

   .work-hours {
     margin-left: 56%;
     transform: translateY(-45.5%);
   }

   .work-hours p {
     font-size: 17px;
     line-height: 30px;
     text-align: left;
   }

   .page-social-media-links {
     transform: translateY(-150%);
     margin-left: 40%;
   }

   .ig-link {
     flex: .27;
   }

   .fb-link {
     flex: .27;
   }

   .jaliyadesigns-link {
     margin-left: 1%;
     margin-top: 5%;
     transform: translateY(-140%);
   }

   .jaliyadesigns-link p {
     font-size: 17px;
     text-align: center;
   }

<footer>
  <div class="page-footer-logo">
    <img src="../LP-Images-Website/Images/footer-logo.png" alt="logo for the footer">
  </div>

  <div class="contact-info">
    <p>CONTACT ME<br> (202) 656-18826 <br> [email protected]
    </p>
  </div>

  <div class="nav-links">
    <p>
      <a href="#">Portfolio</a><br>
      <a href="#">About Me</a><br>
      <a href="#">Packages</a><br>
      <a href="#">Contact Me and Booking</a>
    </p>
  </div>

  <div class="work-hours">
    <p>WORK HOURS<br> Monday 9:30am-5:00pm<br> Tuesday 9:30am-5:00pm<br> Wednesday 9:30am-5:00pm<br> Thursday 9:30am-5:00pm<br> Friday 9:30am-5:00pm<br> Saturday 9:30am-5:00pm<br>
    </p>
  </div>

  <div class="page-social-media-links">
    <div class="fb-link">
      <a href="#"><img src="../LP-Images-Website/Images/footer-facebook-icon.png" alt="facebook icon" style="height: 30px; width: 30px;"></a>
    </div>
    <div class="ig-link">
      <a href="#"><img src="../LP-Images-Website/Images/footer-ig-icon.png" alt="instagram icon" style="height: 25px; width: 25px;"></a>
    </div>
  </div>

  <div class="jaliyadesigns-link">
    <p>Website designed by <a href="http://jaliyadesigns.myportfolio.com">J. Aliya Designs LLC</a>.</p>
  </div>
</footer>

Answer 1

为了查看哪个标签引起骚动，可以使用以下技术如果边框扩展到“空白”，它将通过边框突出显示由页脚阻止的空间，然后您可以使用填充或边距将其最小化或隐藏。