潜水高度始终为零-如何使其自动假设高度

Div height always zero - how to make it assume height automatically

本文关键字：高度 何使其 假设 潜水      更新时间：2023-09-26

我想在我的网站上显示通知，AwNotices插件似乎是一个合适的解决方案。然而，问题是部分的高度始终为零，因此它不会向下推送任何内容，而是出现在同一部分上。

HTML:

<section class="awNotices">
  <a notice-color="orange" href="http://adobewordpress.com" class=""><i class="fa fa-bell"></i>
            <font><font> 'Tomorrowland' Is a Box-Office Disappointment</font></font></a>
  <a notice-color="red" class="active"><i class="fa fa-heart"></i><font><font> Sunday Book Review: Shakespeare in Love</font></font></a>
  <a notice-color="blue" class=""><i class="fa fa-desktop"></i><font><font> Overvalued in Silicon Valley, but Do not Say "Tech Bubble"</font></font></a>
  <a notice-color="green" class=""><i class="fa fa-leaf"></i><font><font> Created for the World Health Emergency Fund Agency</font></font></a>
  <a notice-color="dark" class=""><i class="fa fa-comments"></i><font><font> John Nash, Nobel Prize Winner, Dies in Crash.</font></font></a>
  <span class="controller fa fa-pause"></span>
</section>
<div>
  Hello World.
</div>

JS:

$('.awNotices').append('<span class="controller fa fa-pause"></span>');
$('.awNotices a:nth-of-type(1)').addClass('active');
function awNotice() {
  if (!$('.awNotices').hasClass('stopped')) {
    var $active = $('.awNotices a.active');
    var $next = $active.next('a');
    if ($next.length) {
      $next.addClass('active');
      $active.removeClass('active');
    } else {
      $active.removeClass('active');
      $('.awNotices a:first-of-type').addClass('active');
    }
  }
}
$('.awNotices .controller').click(function () {
  $(this).toggleClass('fa-pause fa-play');
  $('.awNotices').toggleClass('stopped');
})
function awNotices(timer) {
  setInterval("awNotice()", timer);
}
awNotices(2000);

我为它制作了一把小提琴：http://jsfiddle.net/pm3hz9x1/4/

我如何确保该部分自动占据其高度，并像它应该的那样向下推送所有内容？

我刚刚检查了你的小提琴，发现你的.awNotices a有position:absolute;，所以它不会在内容中发生实际位置（<section>）。

如果我去掉它的位置，它是有效的，但它看起来很难看，因为您使用了visibility:hidden。我去掉了可见性，用display none/block代替活动类。

现在它看起来很好，因为它应该是IMO。这是我用你的两个类修改的代码。

.awNotices a {
  /* position: absolute; */
  /* visibility: hidden; */
  display: none;
}
.awNotices a.active {
  /* visibility: visible; */
  display: block;
}

上面的代码只显示更改后的特定CSS属性，您必须包含其他类属性才能获得预期的结果。请看一下我更新的小提琴！

相关文章：