[英]Resize div based on its content
我有这个Li
标签,它在我的引导程序主题中显示了通知下拉列表,但是问题是,如果此li
标签中没有内容,那么它也显示为300px
高度,我也尝试过删除该高度,但仍然没有运气。 如果其中没有内容,如何调整此li
标签的大小。
内容显示在media-body标签中
<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();
});
您可以通过css :empty
选择器选择空元素并将其隐藏:
element:empty {
display: none;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.