时间戳

首页 > 解决方案 > 部分是重叠的页脚，我已经尝试过提到的解决方案

html - 部分是重叠的页脚，我已经尝试过提到的解决方案

问题描述

我有一个部分重叠不知道为什么。我尝试使用边距和填充来用我的 .div-wrap 向下推页脚，但它似乎不起作用。我环顾四周，不确定它可能是什么。会喜欢一些输入，我敢打赌这是一个简单的解决方法，只是现在看不到。谢谢你的帮助。

    <style>
    @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
    </style>
    
    <section class="servies">
        <div class=" services-container">
        <h4 class=" services">
         Gone are the days of mass marketing where brands could create generic messaging and get results. Thankfully we live in a new more progressive era and brands need to be authentic and reach their auidences in a non advertisy way. I promise to help you define that message and get the word out by any means neccary. This can be in the form of idenitity and logo design, user experience and interface design, web design and development, social media marketing and campaign adertising, E-commerce design and development. What ever your creative needs are you can contact me to set up an appointment.
        </h4>
      </div>
    </section>
    
    
    <header>
          <h1>
            <a href="index.html"><img src="my-logo-01.svg" class="menu"></a>
          </h1>
        <nav>
          <a href="about.html" class="underline menu highlight">About</a>
          <a href="services.html" class="underline menu highlight">Services</a> 
          <a href="contact.html" class="underline menu highlight">Contact</a>
          <a href="blog.html" class="underline menu highlight">Blog</a>    
        </nav>  
    </header>
    
    <footer>
      <div class="footer-container">
        <div class="grid-container">
        <div class="based"> 
            <h3>
              BASED IN <br>
              CREAM CITY<br>
              <span class="highlight ">MILWAUKEE</span>
              <span class="highlight ">WISCONSIN</span>
            </h3>
          </div>
        <div class="follow-me">
          <h3>
            FOLLOW ME ON<br>
            <span class="highlight">INSTAGRAM</span>
            <span class="highlight">TWITTER</span>
            <span class="highlight">DRIBBLE</span>
            <span class="highlight">MEDIUM</span>
          </h3>
        </div>
        <div class="inq">
          <h3>
            FOR INQUIRIES<br>
            <span class="highlight">HI@WORKBY</span><br><span class="highlight">CHRIS.ME</span>
          </h3>
        </div>
        <div class="signup">
          <h3>
            SIGN UP FOR MY<br> NEWS LETTER
                      <form action="https://superhi1.createsend.com/t/j/s/vtikrl/" method="post"                            id="subForm" class="sign-up">
                <input placeholder="Email" id="fieldEmail" name="cm-vtikrl-vtikrl"                          type="email" required class="email-input">
                <input type="submit" value="Submit" class="submit">
              </form>
          </h3>
        </div>
      </div>
    </div>
    </footer>
    `
    
        h4 {
      font-size: 48px;
      line-height: 1.2;
    }
    
    section .services {
      height: 100vh;
      margin: auto;
    }
    
     .services-container {
      padding-bottom: 112px;
         min-height: 100%;
      height: auto;
      /* Negative indent footer by its height */
      margin: 0 auto -60px;
      /* Pad bottom by footer height */
      padding: 0 0 60px;
    }
    
    footer {
      height: 100vh;
      margin-top: 112px;
      padding: 64px;
    }
    
    .footer-container {
      margin: auto;
       max-width: 900px;
    }
    
    h3 {
      font-size: 56px;
      line-height: 1.2;
       font-weight: 800;
    }
    
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 80px 80px;
      grid-template-areas: "based follow-me" "inq signup";
     
    }
    
    .signup h3 {
      font-size: 48px;
     
    }
    
    
    
    form, .signup {
      font-size: 35px;
    }
    
    input[type=button], input[type=submit], input[type=reset] {
      background-color: #000000;
      border: none;
      color: white;
      padding: 16px 32px;
      text-decoration: none;
      margin: 4px 2px;
      cursor: pointer;
      width: 100%;
    }

标签： htmlcss

解决方案

您正在使用height: 100vh100% 的浏览器视口。它也是一个相对高度，而不是绝对高度。因此，如果该元素内的文本大于视口，它将与下一个元素重叠。

您可以隐藏重叠的内容，也可以将高度设置为最小 100vh，以便在文本较长时自动展开。

解决方案#1

section .services {
    min-height: 100vh;
    margin: auto;
}

解决方案#2

section .services {
    height: 100vh;
    margin: auto;
    overflow: hidden;
}

推荐阅读