html - 如何在没有内容时让边框消失？

Question

我有以下侧边栏:

div.sphinxsidebar {
    margin: 0px 15px 0px 0;
    padding: 0;
    width: 210px;
    float: right;
    font-size: 1em;
    text-align: center;
    border: 0.2px solid #CCC;
    border-radius: 10px;
    background-color: #F7F7F7;
    }

这个 div 里面有一个包装器:

div.sphinxsidebarwrapper {
   padding: 0;

}

我看起来像这样:

----------------------------------------

|--------目录--------|

----------------------------------------

我遇到的问题是当这个 div 变空时，边框看起来像这样:

----------------------------------------

所以本质上，上边框与下边框重合，并且边框仍然可见。

对于这种情况，我如何使边框消失。

问题似乎是边框有一个与之关联的高度。所以到div，内容不为空。

Answer 1

可以使用CSS3方案或者JS方案

CSS

隐藏元素:

.sphinxsidebar:empty{
    display:none
}

或仅删除边框:

.sphinxsidebar:empty{
    border: none;
}

JS:删除元素:

$(document).ready(function() { $('.sphinxsidebar:empty').remove(); });

或删除边框:

$(document).ready(function() { $('.sphinxsidebar:empty').css({'border': 'none'}); });