頁腳對移動用戶沒有響應

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