Изменение размера div на основе его содержания

Question

У меня есть этот Li тег, который показывает раскрывающееся окно с уведомлением в моей теме начальной загрузки, но проблема в том, что в этом теге li нет содержимого, а также отображается с 300px height, я попытался удалить эту высоту также, но все же не повезло. Как изменить размер этого тега li, если в нем нет содержимого.

Содержимое отображается в теге медиа тела

<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

Вы можете выбрать пустой элемент с помощью селектора CSS :empty и скрыть его:

element:empty { 
    display: none; 
}