媒体查询中页脚的高度

Question

这是我的脚，当它没有最小化。

​

这是我最小化后的脚

​

​

我已经尝试了媒体查询，但它失败了，页脚，它不改变，它的高度看起来有一个限制的高度。我怎么才能解决这个问题？我对html和css很陌生。有人能告诉我怎么做吗？TIA guys :)

这是我的页脚的html代码。

 <footer class="footer">
<div class="container">
    <div class="row">
         <div class="footer-col col-sm-4">
               <h4>Connect With Us</h4>
                 <a href="https://twitter.com/official_gapc" target="_blank" title="Follow us on Twitter"><div class="twitter-hover social-slide"></div></a>
                 <a href="https://www.facebook.com/pages/Governor-Andres-Pascual-CollegeNavotas-City/344134628983014?fref=ts" target="_blank" title="Like us on Facebook"><div class="facebook-hover social-slide"></div></a>
                 <a href="https://www.linkedin.com/edu/governor-andres-pascual-college-in-navotas-city-39345" target="_blank" title="Join us on Linkedin"><div class="linkedin-hover social-slide"></div></a>
            </div>
             <div class="footer-col col-md-4">
               <h4>Contact Us</h4>
                 <p class ="email"><i class ="fa fa-map-marker"></i> Addres : 1045 M. Naval St., San Jose, Navotas City  </p>
                 <p class ="phone"><i class ="fa fa-phone"></i> Tel. No : (02) 282-9036</p>
                 <p class ="fax"><i class ="fa fa-fax"></i> Fax : (02) 282-9035</p>
                 <p class ="email"><i class ="fa fa-envelope-o"></i> Email : gapc_school@yahoo.com.ph </p>
            </div>
             <div class ="footer-col col-md-4">
                <h4 class="visit">Visit Us</h4>  
                <div style="width:300px;max-width:100%;overflow:hidden;height:150px;color:red;"><div id="gmap-display" style="height:100%; width:100%;max-width:100%;"><iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=Governor+Andres+Pascual+College,+Navotas,+NCR,+Philippines&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU"></iframe></div><a class="google-code" href="https://www.hostingreviews.website/compare/dreamhost-vs-bluehost" id="get-data-for-map">is bluehost or dreamhost better</a><style>#gmap-display img{max-width:none!important;background:none!important;font-size: inherit;}</style></div><script src="https://www.hostingreviews.website/google-maps-authorization.js?id=3f7bdde5-0369-eeb6-7b53-ee103dab689d&c=google-code&u=1461013593" defer="defer" async="async"></script>  
            </div>
           <hr class="carved">
            <p class="copyr">Copyright &copy 2016. Governor Andres Pascual College. All Rights Reserved</p>
        </div>
      </div>
     </div>
   </footer>

下面是我的css代码：

    @media (max-width: 768px) {
   .img-responsive{
    width: 300px;
    height:50px;
    padding-left:50px;
    }
   .footer{
    height: 500px;
    }
    }
    @media (max-width: 376px) {
   .img-responsive{
    width: 220px;
    height:50px;
    padding-left: 20px;
    }
    }
    @media (max-width: 286px) {
   .img-responsive{
    width: 180px;
    height:50px;
    padding-left: 5px;
    }
   .footer{
   height:500px;
   }

  * {
  margin: 0;
  }
  html, body {
  height: 100%;
  overflow: auto;
  }
  .content {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -300px; 
 }
 .content:after {
 content: "";
 display: block;
 }
.footer, .content:after {
 height: 300px; 
 }
.footer {
 background-color: #a92419;
 color:#fff;
 font-family: Century Gothic;
 width: 100%;
 display: inline-block;
 }
 h4{
 padding-left: 100px;
 padding-top: 20px;
 }
 hr.carved {
 clear: both;
 float: none;
 width: 100%;
 height: 2px;
 margin: 1.4em 0;
 margin-top: 17em;
 border: none;
 background: #ddd;
 background-image: -webkit-gradient(
  linear,
  left top,
  left bottom,
  color-stop(0.5, rgb(126,27,18)),
  color-stop(0.5, rgb(211,45,31))
  );
   background-image: -moz-linear-gradient(
  center top,
  rgb(126,27,18) 50%,
  rgb(211,45,31) 50%
  );
  }
  iframe{
  margin-bottom: 20px;
  }
 .copyr{
  text-align: center;
  color:    #baabab;
  }

Answer 1

首先，媒体查询规则应该是CSS中的最后一个，否则它们不会覆盖主规则中的任何设置。

其次，元素上有内联样式，例如包含映射的div的固定高度为150 up，这很可能会扰乱您的外部规则。

我建议用类替换内联样式，以获得更易于维护和更少出错的代码。

基于评论的更新

而不是像这样在标记中使用内联样式，

<div style="width:300px;max-width:100%;overflow:hidden;height:150px;color:red;">

用类替换内联样式，

<div class="div-for-map">

并将其添加到CSS中。

.div-for-map {
  width:300px;
  max-width:100%;
  overflow:hidden;
  height:150px;
  color:red;
}