Question

我有两个Div在彼此之上：#header-menu及以下是#banner。两者都跨越#body的整个宽度。

他们都有a {border-bottom:5px}。但是当#banner为空（我只在某些页面上放入内容）时，border-bottom上的#header-menu将是#banner边界的5px + 5px杀死了设计。

我的问题是，如果#banner小于5px，那么使用JS和CSS可以带走#banner的边界？如果是的话，那该怎么做呢？

我在Drupal 7上，我可以在php中这样做，所以当#banner为空时会有边框吗？

Answer 1

这就是你要做的事情

$(".banner").each(function(){
  if( $(this).height() < 5){
    $(this).remove();
  }
});

或者：

$(".banner").each(function(){
  if( $(this).html() == ''){
    $(this).css('border-bottom', 'none');
  }
});

对于页面上的每个横幅，请阅读它的HTML。如果html为空，则将banner的css border-bottom属性设置为none。但是，我建议如果它是空的，它是一个毫无意义的html元素，那么更好的是将其删除：

$(".banner").each(function(){
  if( $(this).html() == ''){
    $(this).remove();
  }
});

（这里我使用的是.banner而不是#banner）

但是我会敦促你使用某种服务器端代码，如果div将是空的，就不输出html。