时间戳

首页 > 解决方案 > 我的一个网页的页脚宽度在小屏幕上比它应该缩小的多，并且没有出现在底部 - 如何纠正它？

javascript - 我的一个网页的页脚宽度在小屏幕上比它应该缩小的多，并且没有出现在底部 - 如何纠正它？

问题描述

我的一个网页页脚的宽度在小屏幕上比它应该缩小的多，并且没有出现在底部 - 如何纠正它？

$(function() {
  $('.links').on("click", function() {
    $("#myTopnav").removeClass("responsive");
  });
  $("#toggle").on("click", function() {
    const $nav = $("#myTopnav");
    $nav.toggleClass("responsive");
    $(this).html(
      $nav.hasClass("responsive") ? "X" : "▼"
    )
  });
});

function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}

function changeGoogleStyles() {
  if (($goog = $('.goog-te-menu-frame').contents().find('body')).length) {
    var stylesHtml = '<style>' +
      '.goog-te-menu2 {' +
      'max-width:100% !important;' +
      'overflow:scroll !important;' +
      'box-sizing:border-box !important;' +
      'height:auto !important;' +
      '}' +
      '</style>';
    $goog.prepend(stylesHtml);
  } else {
    setTimeout(changeGoogleStyles, 50);
  }
}
changeGoogleStyles();

jQuery(function($) {
  var $window = $(window);
  var $buttonTop = $('.button-top');
  $buttonTop.on('click', function() {
    $('html, body').animate({
      scrollTop: 0,
    }, 400);
  });
  $window.on('scroll', function() {
    if ($window.scrollTop() > 300) { // 300 is our threshold in pixels
      $buttonTop.addClass('button-top-visible');
    } else {
      $buttonTop.removeClass('button-top-visible');
    }
  });
});
p.translate {
  display: none;
}

@media only screen and (min-width: 320px) and (max-width: 861px) {
  p.translate {
    display: inline;
  }
}

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 6px;
  overflow: hidden;
  background-color: #87cefa;
}

ul.topnav li {
  float: left;
}

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 0px 3px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 16px;
}

ul.topnav li a:hover {
  background-color: #0000FF;
  color: white !important;
}

ul.topnav li.icon {
  display: none;
}

@media screen and (max-width:1180px) {
  ul.topnav li:not(:first-child) {
    display: none;
  }
  ul.topnav li.icon {
    float: left;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  div.translate {
    margin-top: 3%;
  }
  ul.topnav.responsive {
    position: relative;
  }
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

ul.links li a:hover {
  color: navy !important;
}

.button-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 2px;
  box-shadow: none;
  background: rgba(0, 196, 242, 0.3);
  color: white;
  font-size: 26px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
}

.button-top {
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
}

.button-top-visible {
  opacity: 1;
  pointer-events: auto;
}

ul.list-unstyled li {
  font-size: 16px;
}

.clearfix {
  position: relative;
  min-height: 100%;
}

.footer {
  position: absolute;
  clear: both;
  left: 0%;
  right: -0.1%;
  bottom: 0.4%;
  width: 100%;
  height: auto;
  background-color: #09F;
  color: white;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="container1">
    <div class="sticky"> Heaven based polyclinic offering treatments in modern medicine, homoeopathy, ayurveda, naturopathy, hypnotherapy, healing and meditation, etc. </div>
    <div class="row">
      <div class="navbar-header">
        <a class="navbar-brand" href="https://www.cure4incurables.in/index.html" style="text-decoration: none; color: rgb(46, 150, 226);">
          <img src="https://www.cure4incurables.in/images/logo.png" alt="Logo" class="responsive"></a>
      </div>
      <div>
        <div class="translate" id="google_translate_element" style="text-align: right; margin-right: 0.2in;">
          <p class="translate" style="font-size: 15px; color: black; line-height: 18px; font-style: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: transparent; font-family: Verdana; text-align: right;">
            <strong><span style="color: navy;">Click &amp; scroll right:-</span></strong></p>
        </div>
        <ul class="topnav" id="myTopnav" style="padding: 0px; margin-left: 0.2in; margin-right: 0.2in; list-style-type: none; list-style-image: none; list-style-position: outside; vertical-align: middle; font-family: &quot;Segoe UI&quot;; font-size: 16px; background-color: rgb(135, 206, 250);">
          <li class="links"><a style="color: black;" href="#">Links:</a></li>
          <li class="links"><a style="color: black;" href="https://www.cure4incurables.in/index.html">Home</a></li>
          <li class="links"><a style="color: black;" href="Company_Profile.html">About Us</a></li>
          <li class="links"><a style="color: black;" href="Our_Services.html">Our Services</a></li>
          <li class="links"><a style="color: black;" href="testimonials.html">Testimonials</a></li>
          <li class="icon"> <a href="#" id="toggle">&#x25BC;</a> </li>
        </ul>
      </div>
    </div>
    </nav>
    <div style="">
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner"></div>
      </div>
      <div id="right">
        <div class="quickcontact">
          <div class="row add-top">
            <div class="col-md-9 col-sm-9">
              <div class="bodycont">
                <h1>ECZEMA</h1>
                <table style="color: rgb(102, 102, 102); font-family: &quot;verdana&quot;; font-size: 18px; font-style: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: transparent;">
                  <tbody>
                    <tr>
                      <td style="font-size: 16px; text-align: left;" valign="top">
                        <font face="verdana" size="4">
                          <div style="text-align: left;">
                          </div>
                        </font>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <p style="margin: 0px 0px 10px; text-align: justify; color: rgb(51, 51, 51); font-family: &quot;Open Sans&quot;,sans-serif; font-size: 18px; font-style: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">O blah blah blah blah blah blah blah blah blah blah blah blah </p>
                <p> blah blah blah blah blah blah blah blah blah blah blah dee</p>
                <p> bleed bleed bleed bleed bleed bleed bleed bleed bleed bleed bleed</p>
                </td>
                </tr>
                </tbody>
                </table>
              </div>
            </div>
            <div class="col-md-3 col-sm-3">
              <div class="bodycont">
                <div class="quickcontact">
                  <h6>Specializations</h6>
                </div>
              </div>
            </div>
          </div>
          <div class="clear"></div>
          <br>
          <br>
          <br>
          <footer style="top: 50%; height: auto; width: 73.2%;" class="panel-footer footer add-top">
            <div style="width: 100%; line-height: 3px; background-color: transparent;" class="col-md-12 col-sm-12">
              <a href="https://www.cure4incurables.in/index.html"> Home</a> | <a href="https://cure4incurables.in/Company_Profile.html"> About Us </a> | <a href="https://www.cure4incurables.in/101_Dr.Ramaanand.html"> Dr Ramaanand </a> | <a href="https://www.cure4incurables.in/Our_Services.html"> Our Services </a>              | <a href="https://www.cure4incurables.in/testimonials.html"> Testimonials </a> | <a href="https://www.cure4incurables.in/Contact_Us.html"> Contact Us </a> </div>
        </div>
        </footer>
      </div>
      <div class="footer-btm">
        <div class="container">
          <div class="col-md-12 col-sm-12 text-center"> Le Blanche Masion © 2009,2021 </div>
        </div>
      </div>
      <a href="#" class="cd-top">Top</a>
      <button class="button-top"><i class="fa fa-chevron-up"></i></button>
    </div>
  </div>
</div>
</div>
</body>

标签： javascripthtmlcss

解决方案

我看到您在页脚中有一个“静态”宽度。

<footer style="top: 50%; height: auto; **width: 73.2%;**" class="panel-footer footer add-top">
                
</footer>

删除宽度：73.2%。并添加一个媒体查询来管理不同屏幕的宽度。

<footer style="top: 50%;" class="panel-footer footer add-top">
                    
</footer>

CSS：

/* For 100% Width default in all Screen */
.panel-footer.footer {
  width: 100%;
  height: auto;
  background-color: blue;
}

/* When the browser is at least 320px and above */
@media screen and (min-width: 320px) {
  .panel-footer.footer {
    /* Apply some styles */
  }
}
/* When the browser is at least 425px and above */
@media screen and (min-width: 425px) {
  .panel-footer.footer {
    /* Apply some styles */
  }
}
/* When the browser is at least 768px and above */
@media screen and (min-width: 768px) {
  .panel-footer.footer {
    /* Apply some styles */
  }
}
/* When the browser is at least 1024px and above */
@media screen and (min-width: 1024px) {
  .panel-footer.footer {
    /* Apply some styles */
  }
}

推荐阅读