用JS控制边框高度

I have two Divs on top of each other: #header-menu and below is #banner. Both are spanning the full width of #body.

Both of them have a {border-bottom:5px}. But when #banner is empty (I only puth things in it on certain pages) then the border-bottom on #header-menu will be 5px + the 5px from the border of #banner and that kills the design.

My question is if I by using JS and CSS can take away the border of #banner if #banner is less than 5px heigh? If so, how to do it then?

I'm on Drupal 7, can I do it in php so when #banner is empty then there will be borders?

This is what you are asking to do

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

Or:

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

For every banner on the page, read it's html. if the html is empty, then set the banner's css border-bottom property to none. However, I'd suggest that if its empty, its a pointless html element, so better would be to remove it like this:

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

(here I've used .banner rather than #banner)

http://codepen.io/EightArmsHQ/pen/qNQwOQ

However I'd urge you to use some kind of server side code to just not output the html if the div is going to be empty.