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

将div设置为空时，也将显示设置为无。

display:none;

Answer 2

您可以使用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'}); });

如果没有内容，如何让边框消失？

2 个答案: