Resize div basierend auf seinem Inhalt

Question

Ich habe dieses Li Tag, das Benachrichtigungsdropdown in meinem Bootstrap Thema zeigt, aber das Problem ist, wenn es keinen Inhalt in diesem li Tag ist, dann wird auch mit 300px Höhe angezeigt, habe ich versucht, diese Höhe zu entfernen auch aber immer noch kein glück. Wie kann ich dieses li Tag ändern, wenn darin kein Inhalt ist?

Inhalt wird in Medien-Body-Tag

<li class="dropdown navbar-notification"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
     <i class="fa fa-bell"></i> 
    </a> 
    <div class="dropdown-menu"> 
     <div class="dropdown-header"> 
      <span class="title">Notifications 
       <strong>(0)</strong> 
      </span> 
     </div> 
     <div class="dropdown-body niceScroll"> 
      <div class="media-list small"> 
       <a href="" class="media"> 
        <div class="media-object pull-left"><i class="fa fa-ban fg-danger"></i> 
        </div> 
        <div class="media-body"> 
         <span class="media-text">No new Notification</span> 
         <!-- Start meta icon --> 
         <span class="media-meta"></span> 
         <!--/ End meta icon --> 
        </div> 
        <!-- /.media-body --> 
       </a> 
      </div> 
     </div> 
     <div class="dropdown-footer"> 
      <a href="https://www.example.com/notification">See All</a> 
     </div> 
    </div> 
</li> 

$(".navbar-notification .niceScroll").mouseover(function() { 
    $(".navbar-notification .niceScroll").niceScroll({ 
     cursorwidth: '10px', 
     cursorborder: '0px' 
    }).resize(); 
}); 

Answer 1

gezeigt Sie leeres Element von CSS :empty Selektor auswählen und verstecken es:

element:empty { 
    display: none; 
}