页脚对移动用户没有响应

Question

我正在尝试建立一个网站，但我的页脚没有响应，它在桌面上运行良好，但在手机上它是重叠的。 请帮我。

下面是我面临的错误的图像。 我还为您提供了我遇到错误的代码。 请帮我找到合适的解决方案。

 main { width: 100%; height: 80vh; position: relative; }.center { width: 80vw; height: 60vh; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); }.center h1 { text-align: center; color: #fff; margin: auto; }.center.notice { color: #fff; font-size: 16px; }.center.notice li { list-style: disc; }.center.notice li a { text-decoration: underline; } footer { position: relative; background: #1B1B1B; color: #868c96; } footer p { padding: 40px 0; text-align: center; }

 <main> <div class="center"> <h1>Share Your Secrets Anonymously</h1> <hr style="margin: 20px 40px"> <div class="notice"> <ul> <li>Greetings to all. Greetings from the secrets page. All of the secrets that users have posted on this site are available here.</li> <br> <li>Our top priority is the security of our users, therefore we here protect your password, email, and other personal information. No one has access to these data, not even with admin approval. </li><br> <li>You can upload your secret anonymously and view all the secrets anonymously. No one can determine who uploaded this.</li><br> <li>To safeguard the database, you may only share one secret per user account, and no one may upload more than one secret per user. The previous secret will be replaced with the new one if you do this. </li><br> <li>It is more convenient and simple to access the secrets using a desktop or laptop than a mobile device. </li><br> <li>You must first log in to our program to access other users' secrets or to upload your secrets; if you don't already have an account, you can create one here.</li><br> <li>Click the navbar on the left side of the page to <a href="/authenticate">login or register</a>. </li><br> <li>Please provide your insightful comments on the application. to send, <a href="mailto:@mrvoid1244@gmail.com" target="_blank">Click Here</a>.</li> </ul> </div> </div> </main> <section> <footer> <p>Copyright &copy; 2022 Piyush Shrivastava, All Rights Reserved.</p> </footer> </section>

Answer 1

为避免页脚重叠，您可以更改以下内容

.center {
  width: 80vw;
  /*height: 60vh;*/
  min-height: 60vh;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

固定高度正在使带有通知 class 的 div 移出带有中心 class 的 div，这就是为什么您的页脚与通知 class 的 div 内的内容重叠希望这有帮助！！！

Answer 2

将您的页脚更改为遵循 CSS 代码应该可以解决问题。 如果您觉得“footer p”太高，您可以减少它的填充。

    footer {
      position: fixed;
      background: #1B1B1B;
      color: #868c96;
      bottom: 0;
      width: 100%;
    }

Answer 3

我在本地机器上运行您的代码，但无法使用。center class 位置给出了但没有它我能够解决您的问题。

这是我所做的 CSS 更改，以便页脚保持在内容下方并且不重叠->

 html, body{ height: 100%; } main{ min-height: 100%; }.center { overflow: auto; padding-bottom: 100px; }.center h1 { text-align: center; color: #fff; margin: auto; }.center.notice { color: #fff; font-size: 16px; }.center.notice li { list-style: disc; }.center.notice li a { text-decoration: underline; } footer { position:relative; background: #1B1B1B; margin-top: -100px; color: #868c96; clear: both; } footer p { padding: 40px 0; text-align: center; }