Jquery或CSS：为div设置静态，不可更改的高度？

Question

所以我正在使用Adsense响应式横幅，我遇到了一个问题。我的css设置为将外部div的最大高度保持为display:inline-block;并使用<div style="display:inline-block; height:160px; width:100%"> <div>ADSENSE RESPONSIVE (Comes as inline-block)</div> </div> ，这是一个非常简单的代码：

overflow

问题是横幅正在扩展外部div的高度，这不应该发生。有没有使用jquery或css的方法，我可以使用它来设置静态和不可更改的高度，无论内部是什么，不使用css <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> ？

EDIT 这是发生了什么：

完整代码

jQuery + HTML：

/* 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 }
    }

CSS

$query2 = $db->query("SELECT * FROM veriler WHERE masraf_kodu='$hesap_kodu' AND tarih BETWEEN '$tarih1' AND '$tarih2'", PDO::FETCH_ASSOC);

一切正常，我只想让高度不可扩展。

Answer 1

如果您不想使用溢出，请在父级设置固定高度，并在子集max-height:100%上设置banner的高度，使其保持最大高度＆＃ 39;父母。请参阅下面的代码段

出于示例目的，我还在300px上添加了banner的高度。所以你可以看到它没有离开div

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;