JQuery или CSS: установить статическую, неизменяемую высоту для div?

Question

Так что я использую Adsense отзывчивый баннер, и у меня есть одна проблема. Мой CSS установлен, чтобы сохранить максимальную высоту внешних дел до 160px; и использует display:inline-block;, это довольно простой код:

<div style="display:inline-block; height:160px; width:100%"> 
    <div>ADSENSE RESPONSIVE (Comes as inline-block)</div> 
</div> 

Проблема заключается в том, что баннер расширяет высоту внешней Див и что не должно произойти , Есть ли какой-либо подход с использованием jquery или css, который я мог бы использовать для установки высоты и неизменяемости, независимо от того, что внутри и без использования css overflow?

EDIT Вот что происходит:

ПОЛНЫЙ КОД

Jquery + HTML:

<div id="adsenselisting"> 
    <div id="adsenselistingadvert"> 



    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
    <!-- Responsive Adsense In Listing --> 
    <ins class="adsbygoogle" 
    style="display:block" 
    data-ad-client="ca-pub-xxxxxxxxxxxxxxx" 
    data-ad-slot="6429507759" 
    data-ad-format="auto"></ins> 
    <script> 
    jQuery(document).ready(function($){(adsbygoogle = window.adsbygoogle || []).push({})}); 
    </script> 



    </div> 
    </div> 

CSS

/* FLUID HEIGHT LAYOUT FOR ADSENSE */ 
#adsenselistingadvert { margin-left:auto; margin-right:auto; max-height:100%; border:2px solid blue; } 

#adsenselisting { display: inline-block; width:100%; max-width:100%; padding-top: 12px; padding-bottom: 12px; border:2px solid red; } 




    @media only screen and (min-width : 1px) { 
    #adsenselisting, #adsenselistingadvert { height:100px } 
    } 
    @media only screen and (min-width : 320px) { 
    #adsenselisting, #adsenselistingadvert { height:130px } 
    } 
    @media only screen and (min-width : 480px) { 
    #adsenselisting, #adsenselistingadvert { height:130px } 
    } 

    @media only screen and (min-width : 640px) { 
    #adsenselisting, #adsenselistingadvert { height:160px } 
    } 
    @media only screen and (min-width : 720px) { 
    #adsenselisting, #adsenselistingadvert { height:200px} 
    } 
    @media only screen and (min-width : 960px) { 
    #adsenselisting, #adsenselistingadvert { height:200px } 
    } 

Все работает просто отлично, я просто хочу высота не может расширяться.

Answer 1

Если вы не хотите использовать переполнение, установите фиксированную высоту на родительский элемент и на дочерний набор max-height:100%, который будет поддерживать высоту banner на максимальной высоте его родителя. см. фрагмент ниже

Я также добавил высоту 300px на banner, например, цели. так что вы можете увидеть, что она не выходит из DIV

.fixedheight { 
 
    border:2px solid red; 
 
    box-sizing:border-box; 
 

 
} 
 

 
.fixedheight >div { 
 
height:300px; 
 
border:2px solid blue; 
 
max-height:100%; 
 
display:inline-block; 
 
box-sizing:border-box; 
 
}

<div class="fixedheight" style="display:inline-block; height:160px; width:100%"> 
 
    <div>ADSENSE RESPONSIVE (Comes as inline-block)</div> 
 
</div>