媒體查詢頁腳的高度

Question

這裏是我的頁腳，當它沒有最小化。

，這是我的頁腳最小

我已經嘗試了媒體的質疑，但其未能頁腳它不改變它看起來像高度有高度的極限時。我怎樣才能解決這個問題？即時通訊新的HTML和CSS。有人可以告訴我怎麼做嗎？ TIA的傢伙:)

這裏是我的頁腳腳本。

<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的固定高度爲150px，這很可能會混淆你的外部規則。

我建議使用類替換內聯樣式以獲得更易維護且不易出錯的代碼。

---

更新基於

而是在這樣的標記具有內嵌樣式的評論，

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

一類取代內嵌樣式，

並將其添加到您的CSS。

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