Jquery 또는 CSS : div에 고정 된 가변 높이를 설정 하시겠습니까?

Question

그래서 애드 센스 반응 형 배너를 사용하고 있는데 문제가 하나 있습니다. 내 CSS는 160px;에 외부 사업부의 최대 높이를 유지하기 위해 설정되고 display:inline-block;를 사용하여, 그것은 아주 간단한 코드입니다 :

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

문제는 배너 외부 DIV의 높이를 확대하고 그렇게하지 말아야한다는 것입니다 . jquery 또는 CSS를 사용하여 접근법이 있나요? CSS 높이가 고정되어 있고 변경할 수 없어도 상관 없습니다. 내부적으로 사용하고 CSS를 사용하지 않고 overflow?

편집 여기에 무슨 일이 일어나고있는 작업은 다음과 같습니다

전체 코드

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에 추가했습니다. 그래서 당신이 사업부

.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>